<div class="box">
<div class="item-name">我是名称**1**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
<div class="item-name">我是名称**2**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
<div class="item-name">我是名称**3**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
</div>
以上是HTML结构,如何让每个UL里的LI只显示一个呢?内容2变成点击显示?请问如何用JQUERY来实现?先谢谢啦!~
用jquery 的 each 方法
先上 jsfiddle
https://jsfiddle.net/k6eu74qh/
再上代码
$("li").each(function() {
var li = $(this);
// 只要不是 ul 的第1个 li,隐藏
if (li.index() > 0) {
li.hide();
}
}).on("click", function() {
// 点击时显示下一个 li
$(this).next("li").show();
});
$('div ul li:eq[0]').show();
$('div ul li:eq[1]').hide();
你可以不用遍历,因为jquery都可以你封装好了啊了,只要是这个class,那么所有找到所有的nodelist。如果需要遍历,给相同的类名的元素不同的dom操作,可以用$(".item-name").each(function(index,el){})//index代表元素下标,el代表当前元素。当然也可以用一般的循环,for,while,do-while循环去遍历。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.disp-none {
display: none;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="box">
<div class="item-name">我是名称**1**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li class="disp-none"><a href="#">内容2</a></li>
</ul>
</div>
<div class="item-name">我是名称**2**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li class="disp-none"><a href="#">内容2</a></li>
</ul>
</div>
<div class="item-name">我是名称**3**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li class="disp-none"><a href="#">内容2</a></li>
</ul>
</div>
<script type="text/javascript">
(function(){
$(function(){
var str = "<li class='btn'><input type='button' value='显示内容2'/></li>";
$(".item-list ul").append(str);
$(".item-list input").click(function(){
var el = $(this);
el.parent().prev().removeClass('disp-none');
})
})
})()
</script>
</body>
</html>
试试吧,不知道符合你说的不
试用jquery的each()方法来进行遍历,这个能满足你的要求,至于用法,你可以百度下看看