我已阅读所有相关帖子，但肯定有一些我遗漏的内容。我有一个类似于下面的 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和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') - 我相信这将是第一个子元素。
我也尝试过使用
var node = document.getElementByClassName();
同时使用“contentList”和“image”，并且无法迭代结果数组或单个元素的索引。
有人可以告诉我我做错了什么或误解了吗...... 谢谢
最佳答案
您没有使用“contentList”类。 获取子元素就像
- $(".listContainer").children();
- :eq() 选择器将为您提供基于索引的匹配元素。 https://api.jquery.com/eq-selector/
- 然后你可以轻松地使用 hide() 隐藏；方法
$(".listContainer").children(':eq(index)').hide();
关于javascript - 使用 JavaScript/jQuery 遍历 HTML DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35039038/