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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php动态函数调用方法
2015/05/21 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python映射拆分操作符用法实例
2015/05/19 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python自动化生成IOS的图标
2018/11/13 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
工程承包协议书
2014/04/22 职场文书
团日活动总结
2014/04/28 职场文书
技校毕业生自荐信
2014/06/03 职场文书
中职生求职信
2014/07/01 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
springboot读取nacos配置文件
2022/05/20 Java/Android