gpt4 book ai didi

javascript - 使用 JavaScript/jQuery 遍历 HTML DOM

转载 作者:行者123 更新时间:2023-12-02 15:07:13 25 4
gpt4 key购买 nike

我已阅读所有相关帖子,但肯定有一些我遗漏的内容。我有一个类似于下面的 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”类。获取子元素就像

  1. $(".listContainer").children();
  2. :eq() 选择器将为您提供基于索引的匹配元素。 https://api.jquery.com/eq-selector/
  3. 然后你可以轻松地使用 hide() 隐藏;方法

$(".listContainer").children(':eq(index)').hide();

关于javascript - 使用 JavaScript/jQuery 遍历 HTML DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35039038/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com