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 图片预览效果 推荐
Dec 22 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
js post提交调用方法
Feb 12 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
纯JS实现简单的日历
Jun 26 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
OpenLayers3实现测量功能
Sep 25 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语法(1)
2006/10/09 PHP
PHP编程与应用
2006/10/09 PHP
逐步提升php框架的性能
2008/01/10 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python程序运行原理图文解析
2018/02/10 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
廉政教育心得体会
2014/01/01 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python