Я хочу обернуть два элемента в контейнере, НО, только если они непосредственно следуют друг за другом.

ПРАВДА

<div class="element"></div>
<div class="element"></div>

ЛОЖНЫЙ

<div class="element"></div>
<p class="different-element"></p>
<div class="element"></div>

Я знаю, как обернуть их, используя .wrapAll('<div class="container"></div>')

Просто интересно как поймать, что они следуют друг за другом. Я думал, что .next() будет работать и использовал if( $('.element').next('.elememt') == true) Затем, если условие истинно, оборачивая их, используя .wrapALL() - но это не работает.

.has() не будет работать, так как он проверяет только потомков.

Любые предложения были бы замечательными. Благодарность

1
fidev 15 Дек 2015 в 14:18

3 ответа

Лучший ответ

Для этого вы можете использовать селектор брата; + :

var $secondElement = $('.element + .element');
$secondElement.add($secondElement.prev()).wrapAll('<div class="container"></div>')

Пример скрипки

Обратите внимание, что вам может потребоваться более сложная логика, если существует более двух .element братьев и сестер.

3
Rory McCrossan 15 Дек 2015 в 11:22

Может быть, вы можете проверить, совпадают ли индекс следующего брата

 if ( $( ".element" ).next().index() == $( ".element" ).next( ".element" ).index() )
{
  alert( "yes" );
  $( ".element" ).wrap( "<div class='container'></div>" );
}
else
{
  alert( "no" );
}

Вот скрипка

0
gurvinder372 15 Дек 2015 в 11:30

Вы можете использовать для проверки с + селектор брата, который выбирает следующий элемент. Расширение ответа Рори:

var $secondElement = $('.element + .element');
$secondElement.add($secondElement.prev(".element")).wrapAll('<div class="container"></div>')

Примечание: я должен немного изменить свой ответ, так как Рори уже ответил на него лучше. Я не удаляю, потому что, даже я думал так же, как это оригинальная идея.

1
Community 23 Май 2017 в 12:15