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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
详解JavaScript常量定义
Jan 03 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP写日志的实现方法
2014/11/05 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
谈谈Python中的while循环语句
2019/03/10 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
审计主管岗位职责
2014/01/31 职场文书
员工安全生产承诺书
2014/05/22 职场文书
迎国庆演讲稿
2014/09/15 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
三年级学生期末评语
2014/12/26 职场文书
写给老师的保证书
2015/05/09 职场文书
离婚答辩状范文
2015/05/22 职场文书
统招统分证明
2015/06/23 职场文书