JavaScript，JQuery的子節點迭代

雖然我看到很多關於這個總體主題（best way to get child nodes）的帖子，但我找不到任何關於迭代和分配在兩層嵌套的孩子。我在網上看到了一些使用[]和（）的孩子的例子。提前致謝。JavaScript，JQuery的子節點迭代

我們假設我有這個HTML，並且需要一個包含「可排序」UL元素內所有文件名（不包括URL路徑或文件擴展名）的字符串。

<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>

我的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++; 
}

我預計產出將是ABC，而是我得到AAA。

來源

2013-05-15 Kulingar

爲什麼不做''.each（）'？ – karthikr

除了'.children（theCounter）'，使用'.children（）。eq（theCounter）''，雖然有很多更好的方法可以做到這一點比這種類型的循環 – Ian

我剛剛做了一個jsfiddle回答了類似的問題。檢查[this]（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

我忘了提及，我爲出現在「可排序」UL中的圖像動態地形成了HTML，因此我不知道那裏有多少人，也不知道他們的名字可能是什麼。此外，我不相信我違反（只有在UL 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的子節點迭代

回答

相關問題