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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
实用的Vue开发技巧
May 30 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 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实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
python编程线性回归代码示例
2017/12/07 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
django 模版关闭转义方式
2020/05/14 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
存储过程和sql语句的优缺点
2014/07/02 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
中专毕业生自荐信
2013/11/16 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
硕士生工作推荐信
2014/03/07 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
小学家长学校培训材料
2014/08/24 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
2016中秋节广告语
2016/01/28 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js