JavaScript, JQuery дочерний узел итерации

Хотя я вижу много сообщений об этой общей теме (best way to get child nodes) Я ничего не могу найти относительно итерации и назначения в двухслойных вложенных дочерних элементах. Я видел примеры онлайн-игр, которые вызывают с [] и(). Заранее спасибо.JavaScript, JQuery дочерний узел итерации

Предположим, что у меня есть этот HTML-код и вы хотите, чтобы строка всех имен файлов (исключая путь URL-адреса или расширение файла) внутри «сортируемого» элемента UL.

<ul id="sortable" class="ui-sortable"> 
    <li class="ui-state-default"> 
     <img id="aImg" alt="sortable image" src="images/a.jpg" /> 
    </li> 
    <li class="ui-state-default"> 
     <img id="bImg" alt="sortable image" src="images/b.jpg" /> 
    </li> 
    <li class="ui-state-default"> 
     <img id="cImg" alt="sortable image" src="images/c.jpg" /> 
    </li> 
</ul>

My JavaScript выглядит следующим образом:

var theImageOrder = ""; 
var theCounter = 0; 
while (theCounter < $('#sortable').children().length) 
{ 
    var theImageName = $('#sortable').children(theCounter).children(0).attr("src").toString().substring($('#sortable').children(theCounter).children(0).attr("src").toString().lastIndexOf("/") + 1, $('#sortable').children(theCounter).children(0).attr("src").toString().lastIndexOf(".")); 
    theImageOrder = theImageOrder + theImageName; 
    theCounter++; 
}

Я бы ожидать, что результат будет а, но вместо этого я получаю ааа.

источник

2013-05-15 Kulingar

Почему вы не делаете '$ .each()' ?? – karthikr

Вместо '.children (theCounter)', используйте '.children(). Eq (theCounter)', хотя есть гораздо лучшие способы сделать это, чем этот тип цикла – Ian

Я только что сделал jsfiddle сегодня, отвечая на аналогичный вопрос , Проверьте [это] (http://jsfiddle.net/SpYk3/RyYv6/)! Прокрутите мимо гигантского объекта, чтобы увидеть JS, и вы можете получить представление о том, как каждый повторяется через объекты. – SpYk3HH

UL должен иметь только детей LI, и я предполагаю, что выбор изображений будет умным, так как вы ищете атрибут src. $ .map возвращает каждое значение в массиве, вы можете присоединиться к нему, чтобы получить строку. Использование > убеждается это только прямые дети и т.д.:

var images = $.map($('#sortable > li > img'), function(el,i) { 
    return el.src.split('/').pop(); 
}).join(', ');

FIDDLE

источник

2013-05-15 17:59:27 adeneo

Я забыл упомянуть, что я динамически формирую HTML для изображений, которые появляются в «сортируемом» UL, поэтому я действительно не знаю, сколько там и какими могут быть их имена. Кроме того, я не считаю, что нарушаю (только LI в UL), если вы не говорите, что я не должен помещать теги IMG внутри тегов LI, если это так, вы можете связать мне что-то, что поддерживает это? – Kulingar

@ Kulingar - вы можете поместить что-нибудь внутри UL, но обычно только LI как прямые дети, все остальное должно быть вложено внутри элементов списка (LI). Не имеет значения, сколько изображений есть, если они являются прямыми детьми элементов LI, которые сами являются прямыми детьми сортируемого UL. Вы использовали children() в своем коде в вопросе, который обнаруживает только прямых детей, поэтому я предположил, что это было то, что вы хотели, а если нет, просто удалите знак '>' в селекторе. – adeneo

var files = $('#sortable img').map(function(){ 
    return this.src.split('/').pop(); 
}).get();

http://jsfiddle.net/uyQXP/

источник

2013-05-15 18:01:28 undefined

Может быть только один .... ответ. Но успокоитесь в том, что, когда множественные умы приходят к одному и тому же выводу; это кредитует его точность. – Kulingar

jQuery each(), скорее всего, ответ вы ищете.

var theImageOrder = ""; 
$('#sortable > li > img').each(function(index, element){ 
    theImageOrder += element.attr('src').howeverYouWantToModifyThisString(); 
});

источник

2013-05-15 18:01:35

JavaScript, JQuery дочерний узел итерации

ответ

Смежные вопросы