Есть родителе есть дочерние элементы, часть которых расположена в одном ряде, часть в другом.
.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>
Напишем нехитрый скрипт.
$(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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть input с dir="rtl" (перевернутый, ввод справа налево) и такой код: