Как мне перебрать дочерние элементы div, используя jQuery?

257

У меня есть div, и в нем есть несколько элементов ввода ... Я хотел бы пройтись по каждому из этих элементов. Идеи?

jquery iteration Shamoon
источник

476

Используйте children()и each(), вы можете при желании передать селекторchildren

$('#mydiv').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

Вы также можете просто использовать непосредственный дочерний селектор:

$('#mydiv > input').each(function () { /* ... */ });

Энди Э
источник

68

затем используйте $ (this) в замыкании для доступа к «текущему» элементу в цикле.

amarsuperstar

1

@amarsuperstar: только что добавлял эту информацию :-)

Энди Э

Есть ли способ узнать значение «n», предполагая, что $ (this) является «n» -ым дочерним элементом родителя?

Сувик Гош 21.09.16

1

@SouvikGhosh: индекс передается в качестве первого аргумента функции обратного вызова для each(). Проверьте документы, связанные в ответе выше.

Энди E

56

Также возможно перебирать все элементы в определенном контексте, независимо от того, насколько глубоко они вложены:

$('input', $('#mydiv')).each(function () {
    console.log($(this)); //log every element found to console output
});

Второй параметр $ ('# mydiv'), который передается в селектор jQuery 'input', является контекстом. В этом случае предложение each () будет перебирать все входные элементы в контейнере #mydiv, даже если они не являются прямыми потомками #mydiv.

Liquinaut
источник

1

Возможно, из-за вложенности это решение сработало для меня, а другое - нет. По этой причине я думаю, что обычно это лучшее решение.

arame3333

Это то, что я искал. Есть ли способ сделать JSON из их значений? Мне нужно опубликовать всю тему как JSON.

Мухаммед Сакиб

8

Если вам нужно рекурсивно перебирать дочерние элементы :

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // Show element
        console.info($currentElement);
        // Show events handlers of current element
        console.info($currentElement.data('events'));
        // Loop her children
        recursiveEach($currentElement);
    });
}

// Parent div
recursiveEach($("#div"));

ПРИМЕЧАНИЕ. В этом примере я показываю обработчики событий, зарегистрированные для объекта.

tomloprod
источник

5

Это также можно сделать так:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});

Умар Асгар
источник

3

$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

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

Сурия Сванофф
источник

1

children () сам по себе цикл.

$('.element').children().animate({
'opacity':'0'
});

Dan185
источник

1

Я не думаю, что вам нужно использовать each(), вы можете использовать стандартные для цикла

var children = $element.children().not(".pb-sortable-placeholder");
for (var i = 0; i < children.length; i++) {
    var currentChild = children.eq(i);
    // whatever logic you want
    var oldPosition = currentChild.data("position");
}

таким образом, вы можете иметь стандарт для таких функций цикла, как breakи continueработает по умолчанию

так же debugging will be easier

Башир Аль-Момани
источник

По моему опыту, $.each()это всегда медленнее, чем forцикл, и это единственный ответ, который использует его. Ключевым моментом здесь является использование.eq() для доступа к фактическому элементу в childrenмассиве, а не к скобке ( []).

elPastor

Как мне перебрать дочерние элементы div, используя jQuery?

Ответы: