使用JavaScript / jQuery遍歷HTML DOM
[英]HTML DOM traversal using JavaScript /jQuery
問題描述
我已經閱讀了所有相關文章，但肯定有一些我想念的東西。 我有一個類似於以下內容的HTML文檔：
<!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和externalText的文本。
我似乎只能選擇全部或不選擇。 例如代碼：
$('.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'）-我認為這將是第一個子元素。
我也嘗試使用
var node = document.getElementByClassName();
同時使用“ contentList”和“ image”，並且無法迭代單個元素的結果或索引數組。
有人可以告訴我我在做什么錯或誤解....謝謝
4 個解決方案
解決方案1
1 2016-01-27 13:57:07
我在您的HTML中看不到帶有“ contentList”類的元素。 另外， children()[0]將訪問DOM元素，而不是jQuery元素。 如果將其更改為$(".listContainer").children(':eq(0)').hide() ，它將正常工作。
解決方案2
1 已采納 2016-01-27 15:02:50
您沒有使用“ contentList”類。 得到孩子的元素就像
- $（“。listContainer”）。children（）;
- ：eq（）選擇器將為您提供基於索引的匹配元素。 https://api.jquery.com/eq-selector/
- 然后，您可以輕松地使用hide（）隱藏； 方法
$（“。listContainer”）。children（'：eq（index）'）。hide（）;
解決方案3
0 2016-01-27 13:58:17
我想選擇類“ listItem”的每個元素，以便可以動態更改contentImg的src以及innerText和externalText的文本。
您可以使用直接循環：
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...]
}
解決方案4
0 2016-01-27 13:59:04
我不確定這是否是您要找的東西。 但是為了擺脫第一項選擇。 選擇所需的類，它將返回可操縱的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>
使用jQuery在HTML dom中遍歷
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.