Як я повторюю елементи дітей з допомогою jQuery?


257

У мене є div і в ньому є кілька вхідних елементів ... Я хотів би повторити кожен з цих елементів. Ідеї?

Відповіді:


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", якщо припустити, що $ (це) є "n" дитиною батька?
Сувік Гош

1
@SouvikGhosh: індекс передається як перший аргумент функції зворотного виклику для each(). Перевірте документи, пов’язані у відповіді вище.
Енді Е

55

Можна також повторити всі елементи в конкретному контексті, не маючи значення, наскільки вони глибоко вкладені:

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

Другий параметр $ ('# mydiv'), який передається селектору вводу jQuery ', це контекст. У цьому випадку пункт (()) повторюватиме всі вхідні елементи в контейнері #mydiv, навіть якщо вони не є прямими дітьми #mydiv.


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"));   

ПРИМІТКА. У цьому прикладі я показую обробники подій, зареєстровані об'єктом.


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
 });

Це повторюється через усіх дітей та їх елементів із значенням індексу, можна отримати доступ окремо, використовуючи елемент та індекс відповідно.


1

діти () - це петля сама по собі.

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

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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.