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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
vue.js的简单自动求和计算实例
Nov 08 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
推荐文章系统(一)
2006/10/09 PHP
PHP操作文件方法问答
2007/03/16 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
初识Node.js
2015/03/20 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
Python和C/C++交互的几种方法总结
2017/05/11 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python实现人机五子棋
2020/03/25 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
办公室主任先进事迹
2014/01/18 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
双创工作实施方案
2014/03/26 职场文书
民族学专业求职信
2014/07/28 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
义诊活动通知
2015/04/24 职场文书
高质量“欢迎词”
2019/04/03 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang