Jquery select first child с классом родителя с классом

Как я могу выбрать только первый ребенок определенного класса родителя с определенным классом для целей clone()?

<div class="sector_order">

    <div class="line_item_wrapper">
    SELECT THIS DIV
    </div>

    <div class="line_item_wrapper">
    NOT THIS DIV
    </div>

</div>

Я пробую вот так:

var form1 = $(this)
    .parents('.sector_order')
    .children('.line_item_wrapper')
    .children().clone(true)

и получить оба внутренних div с классом line_item_wrapper, но я получаю пустой объект, когда я пытаюсь с этим дополнением:

children('.line_item_wrapper :first')

Спасибо!

Ответ 1

Ваши проблемы в том, что ваш селектор ошибочен, несколькими способами:

parents() возвращает один, два или несколько элементов, которые соответствуют селектору, переданному методу; чтобы ограничить себя элементом первого соответствия, используйте closest() (который возвращает один или нет элементов, которые соответствуют селектору передачи).

Ваше первое использование метода children() возвращает оба элемента, поскольку оба они соответствуют указанному селектору и имеют класс line_item_wrapper; вам нужно явно указать, какой из двух вы хотите, вы можете либо использовать селектор :first (или метод first()), либо селектор :first-child.

Второй вызов метода children() находит дочерние элементы первого элемента, которые соответствуют селектору, который вам кажется не нужен.

В любом случае, если вы должны использовать родителя (начиная с того же элемента $(this)):

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first').clone(true);

Или:

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first().clone(true);

Или:

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first-child').clone(true);

Или, честно говоря, более простой подход (но это не распространяется на проверку родительского класса):

var form1 = $(this).prevAll('.line_item_wrapper:last');

Или:

var form1 = $(this).siblings('.line_item_wrapper').eq(0);

Литература:

Ответ 2

Передача недействительного селектора на children(). Вместо

.children('.line_item_wrapper :first')

попробовать

.children('.line_item_wrapper').first()

Ответ 3

Используйте :first-child

var form1 = $(this).closest('.sector_order').find(':first-child');

ИЛИ .first()

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first();

Ответ 4

Попробуйте следующее:

var $firstDiv = $(".sector_order > .line_item_wrapper:eq(0)");

Это даст вам первого прямого потомка sector_order с классом line_item_wrapper.

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