使用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.