使用JavaScript/jQuery的HTML DOM遍歷

我已閱讀所有相關帖子，但必須有一些我缺少的東西。我有一個HTML文檔，下面類似：使用JavaScript/jQuery的HTML DOM遍歷

<!DOCTYPE html> 
<html> 
<head lang="en"> 
</head> 
<body> 
    <div> 
     <h1 class="hoverClass">HOVER ITEM</h1> 
    </div> 
    <ul class="listContainer"> 
     <li class="listItem" > 
      <div class="image"> 
       <img class="contentImg" src="#"/> 
       <h5 class="innerText">text1</h5> 
       </div> 
      <p class="outerText">Text2</p> 
     </li> 
     <li class="listItem" > 
      <div class="image"> 
       <img class="contentImg" src="#"/> 
       <h5 class="innerText">text1</h5> 
       </div> 
      <p class="outerText">Text2</p> 
     </li> 
     <li class="listItem" > 
      <div class="image"> 
       <img class="contentImg" src="#"/> 
       <h5 class="innerText">text1</h5> 
       </div> 
      <p class="outerText">Text2</p> 
     </li> 
     <li class="listItem" > 
      <div class="image"> 
       <img class="contentImg" src="#"/> 
       <h5 class="innerText">text1</h5> 
       </div> 
      <p class="outerText">Text2</p> 
     </li> 

    </ul> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="indexjs.js"></script> 
</body> 
</html>

我想選擇類「的listItem」的每一個元素，這樣我可以動態改變contentImg的src和的innerText和outerText的文本。

我似乎只能選擇全部或無。例如代碼：

$('.hoverClass').hover(function(){ 
    var li = $(".listContainer").children().length; 
    var title = $(this); 
    title.text(li); 
});

將顯示列表項的數量和

var li = $(".listContainer").hide();

會隱藏所有的項目，但

var li = $(".listContainer").children()[0].hide();

不能掩蓋第一個列表項的div（ class ='image'） - 我相信這將是第一個子元素。

我也使用這兩種「contentList」和「圖像」使用

var node = document.getElementByClassName();

嘗試和一直無法通過的結果或索引的陣列來迭代爲單個元件。

有人能告訴我，我做錯了什麼或誤解.... 感謝

來源

2016-01-27 vitamike

'var li = $（「。'）。children（）[0] .hide（）;'你不使用類contentList在你的html –

'.children（）[0]'不是一個jQuery對象=>'children（）。第一個（）。hide（）'我相信應該工作或'children（）。eq（0）.hide（）' –

http://stackoverflow.com/questions/9151729/how-to-get-children-array- jQuery中的一個元素 – OliverJ90

你不使用類「contentList」。並且獲取子元素就像

$（「。listContainer」）。children（）;
：eq（）選擇器將爲您提供基於索引的匹配元素。 https://api.jquery.com/eq-selector/
然後你可以很容易地隱藏hide（）;方法

$（「。listContainer」）。children（'：eq（index）'）。hide（）;

來源

2016-01-27 15:02:50

我沒有看到一個元素在你的HTML類「contentList」。另外，children()[0]將訪問DOM元素，而不是jQuery元素。如果您將其更改爲$(".listContainer").children(':eq(0)').hide()之類的東西，它將起作用。

來源

2016-01-27 13:57:07 unpollo

謝謝我剛剛嘗試過，它效果很好！ – vitamike

我想選擇class'listItem'的每個元素，以便我可以動態地改變contentImg的src和innerText和outerText的文本。

您可以使用一個簡單的循環：

var listItems = document.getElementsByClassName('listItem'); 

for (var i = 0; i < listItems.length; i++) { 

    var image = listItems[i].getElementsByClassName('image')[0]; 
    var contentImg = image.getElementsByClassName('contentImg')[0]; 
    var innerText = image.getElementsByClassName('innerText')[0]; 
    var outerText = listItems[i].getElementsByClassName('outerText')[0]; 

    [... REST OF CODE HERE...] 

}

來源

2016-01-27 13:58:17 Rounin

我不知道如果這是你在找什麼。但爲了擺脫你選擇的第一個項目。你選擇你想要的類，它返回一個你可以操作的jquery對象的數組。

$('.hoverClass').click(function(){ 
 
    var li = $(".listContainer").children().length; 
 
    var title = $(this); 
 
    $('.listItem')[0].remove(); 
 
    title.text(li); 
 
}); 
 
var i = 0; 
 
$('.listItem').each(function(){ 
 
$(this).find('.innerText').text('Dynamic text ' + i++); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div> 
 
     <h1 class="hoverClass">Click ME</h1> 
 
    </div> 
 
    <ul class="listContainer"> 
 
     <li class="listItem" > 
 
      <div class="image"> 
 
       <img class="contentImg" src="#"/> 
 
       <h5 class="innerText">text1</h5> 
 
       </div> 
 
      <p class="outerText">Text1</p> 
 
     </li> 
 
     <li class="listItem" > 
 
      <div class="image"> 
 
       <img class="contentImg" src="#"/> 
 
       <h5 class="innerText">text1</h5> 
 
       </div> 
 
      <p class="outerText">Text2</p> 
 
     </li> 
 
     <li class="listItem" > 
 
      <div class="image"> 
 
       <img class="contentImg" src="#"/> 
 
       <h5 class="innerText">text1</h5> 
 
       </div> 
 
      <p class="outerText">Text3</p> 
 
     </li> 
 
     <li class="listItem" > 
 
      <div class="image"> 
 
       <img class="contentImg" src="#"/> 
 
       <h5 class="innerText">text1</h5> 
 
       </div> 
 
      <p class="outerText">Text4</p> 
 
     </li> 
 

 
    </ul>

來源

2016-01-27 13:59:04 Neoaptt

使用JavaScript/jQuery的HTML DOM遍歷

回答

相關問題