Jquery和JS获取ul中li标签的实现方法


Posted in Javascript onJune 02, 2016

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标签的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jquery.post用法示例代码
Jan 03 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
Jquery获取第一个子元素简单实例
Jun 02 #Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 #Javascript
javascript三种代码注释方法
Jun 02 #Javascript
JavaScript对Json的增删改属性详解
Jun 02 #Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 #Javascript
node.js 动态执行脚本
Jun 02 #Javascript
浅谈JavaScript 标准对象
Jun 02 #Javascript
You might like
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
菜单效果
2006/10/14 Javascript
JavaScript的面向对象(一)
2006/11/09 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python 远程统计文件代码分享
2015/05/14 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python time()的实例用法
2020/11/03 Python
人民教师求职自荐信
2014/03/12 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
科技馆观后感
2015/06/08 职场文书
教育读书笔记
2015/07/02 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
python图像处理 PIL Image操作实例
2022/04/09 Python