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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
js实现图片无缝滚动
Dec 23 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JavaScript中return用法示例
Nov 29 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
浅谈关于iview表单验证的问题
Sep 29 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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
javascript 闭包详解
2015/02/15 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
Python守护线程用法实例
2017/06/23 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python基于template实现字符串替换
2020/11/27 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
工程师岗位职责
2013/11/08 职场文书
英语教学随笔感言
2014/02/20 职场文书
申论倡议书范文
2014/05/13 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
关于五一放假的通知
2015/08/18 职场文书