Jquery和JS获取ul中li标签的实现方法
来源: 阅读:723 次 日期:2016-06-16 16:39:57
温馨提示: 小编为您整理了“Jquery和JS获取ul中li标签的实现方法”,方便广大网友查阅!

js 获取元素下面所有的li 

var content=document.getElementById("content"); 

var items=content.getElementsByTagName("ul"); 

var itemss=items[2].getElementsByTagName("li");//获取第二个li标签

或 

var div=document.getElementById('a'); 

var ul=div.childNodes.item(0); 

var lis=ul.childNodes; 

for(var i=0;i<lis.length;i++){ 

alert("Item "+i+": "+lis.item(i).innerHTML); 

如何用jquery获得每个ul下最后一个li

$(function(){

$("ul").each(function(){

  var y = $(this).children().last();

  alert(y.text());

});

});

jquery 获取<ul> 点击的是那个<li>

<ul class="anserdh" id="topmenu">

   <li class="qhbg"><a href="" >积分榜</a></li>

   <li><a href="">回答榜 </a></li>

   <li><a href="" >提问榜</a></li>

   <li><a href="" >满意榜</a></li>

</ul>

点击那个就把在那个<li>的追加class="qhbg"样式

比如:点击了回答榜 变成

<ul class="anserdh" id="topmenu">

   <li ><a href="" >积分榜</a></li>

   <li class="qhbg"><a href="">回答榜 </a></li>

   <li><a href="" >提问榜</a></li>

   <li><a href="" >满意榜</a></li>

</ul>

$(function(){

$('.anserdh li a').click(function(){

    $('.anserdh li').removeClass('qhbg');

    $(this).parent().addClass('qhbg');

  })

})

jquery如何定位倒数第二个元素,如一个div里有5个ul,那jquery如何才能锁定到倒数第一个ul,第二个ul,第一个ul样式

$("div ul").eq(-1)$("div ul").eq(-2) 

$('ul li:first-child').css('backgroundColor', '#000');

jquery中.each()遍历元素的一些学习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <title>tab选项卡</title>

  <style type="text/css">

    ul,li{list-style: none;margin: 0px; padding: 0px;}

    li{float: left;width: 80px; height: 30px; background-color: #ccc; border: 2px solid #fff;text-align:center; line-height:30px;}

    #content{clear:left; width:336px; height: 180px; background-color: #999; color:white;}

    #content div{display: none}

    #content .consh{display: block;}

    #title .titsh{background-color: #999;border:2px solid #999; color:#fff}

  </style>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript">

    $(function(){

      $("li").each(function(index){

        $(this).mouseover(function(){

          $("#title .titsh").removeClass("titsh");

          $("#content .consh").removeClass("consh");

          $(this).addClass("titsh");

          $("#content>div:eq("+index+")").addClass("consh");

        })

      })        

    })

  </script>

</head>

<body>

  <div id="tab">

    <div id="title">

      <ul>

        <li class="titsh">选项一</li>

        <li>选项二</li>

        <li>选项三</li>

        <li>选项四</li>

      </ul>

    </div>

    <div id="content">

      <div class="consh">内容一</div>

      <div>内容二</div>

      <div>内容三</div>

      <div>内容四</div>

  </div>

</div>

</body>

</html>

测试的结果是正常,后来在一个实际使用的页面中使用的时候,发现上面的li列表变动的时候,下面的div区块不跟着变动不同的区块,以为是css样式和实际使用的页面中其他的样式冲突了,将css选择器全部改成独有的之后,发现还是这个问题,于是判断应该是这里:

$("#title .titsh").removeClass("titsh");

$("#content .consh").removeClass("consh");

$(this).addClass("titsh");

$("#content>div:eq("+index+")").addClass("consh");

第一句,第二句取出样式的时候,没有问题,第三局给当前的li标签加上titsh的css样式也正常,就是最后一句 给通过div:eq(index)获取到的div区块加样式的时候失败。

于是我在

$("li").each(function(index){

$(this).mouseover(function(){

这两句之间加了一个alert(index)弹窗,看看效果,发现有10几个li标签的索引值被alert出来,一想原来实际这个页面中还有其他的li标签,所以导致each()迭代出来的索引值和下面div区块的索引值对应不上,这样上面li标签变动的时候,下面的div区块就不跟着变了,于是我将js代码改了一下:

<script type="text/javascript">

  $(function(){

     $("#title ul li").each(function(index){

      $(this).click(function(){

       $("#title .titsh").removeClass("titsh");

       $("#content .consh").removeClass("consh");

       $(this).addClass("titsh");

       $("#content > div:eq("+index+")").addClass("consh");

      })

     })        

    })

 </script>

给要用.each()迭代的li元素的选择器加了限制,让他只能找我选项卡中的li标签来each出索引值,问题解决,可以睡觉了!

以上这篇Jquery和JS获取ul中li标签的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map