Определение элемента по-краям

207
14 июля 2017, 04:44

Есть родителе есть дочерние элементы, часть которых расположена в одном ряде, часть в другом.

.box { 
  display: flex; 
  flex-wrap: wrap; 
  border: 2px solid blue; 
  padding: 2px; 
} 
 
.el { 
  height: 50px; 
  border: 2px solid red; 
  margin: 2px; 
} 
 
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) { 
  flex-grow: 3; 
} 
 
.el:nth-child(5), .el:nth-child(6) { 
  flex-grow: 2; 
} 
 
.break { 
  width: 100%; 
}
<div class="box"> 
  <div class="el"></div> 
  <div class="el select"></div> 
  <div class="el"></div> 
  <div class="break"></div> 
  <div class="el"></div> 
  <div class="el"></div> 
</div>

Как определить, есть ли у элемента .el.select соседи .el справа или слева?

То есть, тут должно показать, что справа есть сосет:

.box { 
  display: flex; 
  flex-wrap: wrap; 
  border: 2px solid blue; 
  padding: 2px; 
} 
 
.el { 
  height: 50px; 
  border: 2px solid red; 
  margin: 2px; 
} 
 
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) { 
  flex-grow: 3; 
} 
 
.el:nth-child(5), .el:nth-child(6) { 
  flex-grow: 2; 
} 
 
.el.select { 
  border-color: green; 
} 
 
.break { 
  width: 100%; 
}
<div class="box"> 
  <div class="el"></div> 
  <div class="el select"></div> 
  <div class="el"></div> 
  <div class="break"></div> 
  <div class="el"></div> 
  <div class="el"></div> 
</div>

Тут - что справа нету:

.box { 
  display: flex; 
  flex-wrap: wrap; 
  border: 2px solid blue; 
  padding: 2px; 
} 
 
.el { 
  height: 50px; 
  border: 2px solid red; 
  margin: 2px; 
} 
 
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) { 
  flex-grow: 3; 
} 
 
.el:nth-child(5), .el:nth-child(6) { 
  flex-grow: 2; 
} 
 
.el.select { 
  border-color: green; 
} 
 
.break { 
  width: 100%; 
}
<div class="box"> 
  <div class="el"></div> 
  <div class="el"></div> 
  <div class="el select"></div> 
  <div class="break"></div> 
  <div class="el"></div> 
  <div class="el"></div> 
</div>

И тут - что нету:

.box { 
  display: flex; 
  flex-wrap: wrap; 
  border: 2px solid blue; 
  padding: 2px; 
} 
 
.el { 
  height: 50px; 
  border: 2px solid red; 
  margin: 2px; 
} 
 
.el:nth-child(1), .el:nth-child(2), .el:nth-child(3) { 
  width: calc(33.33333333% - 8px); 
} 
 
.el:nth-child(4), .el:nth-child(5) { 
  width: calc(50% - 8px); 
} 
 
.el.select { 
  border-color: green; 
}
<div class="box"> 
  <div class="el"></div> 
  <div class="el"></div> 
  <div class="el select"></div> 
  <div class="el"></div> 
  <div class="el"></div> 
</div>

Answer 1

Напишем нехитрый скрипт.

$(function() { 
  var $target = $('.el.select'); 
 
	$target.each(function() { 
  	var $self = $(this), 
    		$siblings = $self.siblings('.el'), 
        $parent = $self.parent(); 
         
		var int__border = {top: null, bottom: null, left: $parent.offset().left, right: $parent.offset().left + $parent.outerWidth()}; 
     
    $siblings.each(function() { 
    	var int__top = $(this).offset().top, 
      		int__bottom = $(this).offset().top + $(this).outerHeight(); 
           
    	var int__left = $(this).offset().left, 
      		int__right = $(this).offset().left + $(this).outerWidth(); 
           
      if (int__border.left <= int__left && int__border.right >= int__right) { 
      	if (int__border.top > int__top || int__border.top === null) int__border.top = int__top; 
      	if (int__border.bottom < int__bottom || int__border.bottom === null) int__border.bottom = int__bottom; 
    	}; 
    }); 
     
    var status = {left: false, right: false}; 
     
    $siblings.each(function() { 
    	var int__top = $(this).offset().top, 
      		int__bottom = $(this).offset().top + $(this).outerHeight(); 
           
    	var int__left = $(this).offset().left, 
      		int__right = $(this).offset().left + $(this).outerWidth(); 
           
      if (int__border.top <= int__top && int__border.bottom >= int__bottom) { 
      	if ($self.offset().left + $self.outerWidth() < int__left && int__border.right > int__right) status.right = true; 
      	if ($self.offset().left > int__right && int__border.left < int__left)  status.left = true; 
    	}; 
    }); 
     
    console.log(status); 
  }); 
});
.box { 
  display: flex; 
  flex-wrap: wrap; 
  border: 2px solid blue; 
  padding: 2px; 
} 
 
.el { 
  height: 50px; 
  border: 2px solid red; 
  margin: 2px; 
} 
 
.el:nth-child(1), 
.el:nth-child(2), 
.el:nth-child(3) { 
  width: calc(33.33333333% - 8px); 
} 
 
.el:nth-child(4), 
.el:nth-child(5) { 
  width: calc(50% - 8px); 
} 
 
.el.select { 
  border-color: green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
  <div class="el"></div> 
  <div class="el"></div> 
  <div class="el select"></div> 
  <div class="el"></div> 
  <div class="el"></div> 
</div>