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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
浅析node.js的模块加载机制
May 25 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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代码重构工具推荐
2014/10/14 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP实现倒计时功能
2020/11/16 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python群发邮件实例代码
2014/01/03 Python
python实现调用其他python脚本的方法
2014/10/05 Python
python实现kNN算法
2017/12/20 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python 操作hive pyhs2方式
2019/12/21 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
乡镇消防工作实施方案
2014/03/27 职场文书
《春天来了》教学反思
2014/04/07 职场文书
入股协议书
2014/04/14 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL