Jquery和JS获取ul中li标签

js 获取元素下面所有的li 

var content=document.getElementById(“content”);
var items=content.getElementsByTagName(“ul”);
var itemss=items[2].getElementsByTagName(“li”);//获取第二个li标签

或 

var p=document.getElementById(‘a’);
var ul=p.childNodes.item(0);
var lis=ul.childNodes;
for(var i=0;ialert(“Item “+i+”: “+lis.item(i).innerHTML);
}  

如何用jquery获得每个ul下最后一个li

$(function(){

$(“ul”).each(function(){

    var y = $(this).children().last();

    alert(y.text());

});

});

jquery 获取 点击的是那个

      getElementsByTagName
      getElementsByTagName
      getElementsByTagName
      getElementsByTagName

点击那个就把在那个的追加class=”qhbg”样式

比如:点击了回答榜 变成

 
      getElementsByTagName
      getElementsByTagName
      getElementsByTagName
      getElementsByTagName

$(function(){

$(‘.anserdh li a’).click(function(){
        $(‘.anserdh li’).removeClass(‘qhbg’);
        $(this).parent().addClass(‘qhbg’);

   })

})

jquery如何定位倒数第二个元素,如一个p里有5个ul,那jquery如何才能锁定到倒数第一个ul,第二个ul,第一个ul样式

$("p ul").eq(-1)

登录后复制

$("p ul").eq(-2)

登录后复制

  $(‘ul ligetElementsByTagName’).css(‘backgroundColor’, ‘#000’);

jquery中.each()遍历元素的一些学习

        tab选项卡            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 p{display: none}        #content .consh{display: block;}        #title .titsh{background-color: #999;border:2px solid #999; color:#fff}                    $(function(){            $("li").each(function(index){                $(this).mouseover(function(){                    $("#title .titsh").removeClass("titsh");                    $("#content .consh").removeClass("consh");                    $(this).addClass("titsh");                    $("#content>p:eq("+index+")").addClass("consh");                })            })                        })        

  • 选项一
  • 选项二
  • 选项三
  • 选项四

内容一

内容二

内容三

内容四

登录后复制

复制代码

测试的结果是正常,后来在一个实际使用的页面中使用的时候,发现上面的li列表变动的时候,下面的p区块不跟着变动不同的区块,以为是css样式和实际使用的页面中其他的样式冲突了,将getElementsByTagName全部改成独有的之后,发现还是这个问题,于是判断应该是这里:

$("#title .titsh").removeClass("titsh");$("#content .consh").removeClass("consh");$(this).addClass("titsh");$("#content>p:eq("+index+")").addClass("consh");第一句,第二句取出样式的时候,没有问题,第三局给当前的li标签加上titsh的css样式也正常,就是最后一句 给通过p:eq(index)获取到的p区块加样式的时候失败。于是我在

登录后复制

$("li").each(function(index){$(this).mouseover(function(){这两句之间加了一个alert(index)弹窗,看看效果,发现有10几个li标签的索引值被alert出来,一想原来实际这个页面中还有其他的li标签,所以导致each()迭代出来的索引值和下面p区块的索引值对应不上,这样上面li标签变动的时候,下面的p区块就不跟着变了,于是我将js代码改了一下:

登录后复制

复制代码

      $(function(){          $("#title ul li").each(function(index){            $(this).click(function(){              $("#title .titsh").removeClass("titsh");              $("#content .consh").removeClass("consh");              $(this).addClass("titsh");              $("#content > p:eq("+index+")").addClass("consh");            })          })                        })  

登录后复制

复制代码

给要用.each()迭代的li元素的选择器加了限制,让他只能找我选项卡中的li标签来each出索引值,问题解决,可以睡觉了!

以上就是Jquery和JS获取ul中li标签的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3196470.html

(0)
上一篇 2025年4月1日 03:01:15
下一篇 2025年4月1日 03:02:13

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue项目中能引jquery吗

    vue项目中能引jquery,其引入方法是:1、修改package.json;2、在终端里输入npm install,导入依赖;3、修改webpack.base.conf;4、在组件中引入jquery即可。 本文操作环境:windows7系…

    2025年4月5日 编程技术
    200
  • 详解js在html中的加载执行顺序

    js在html中的加载执行顺序 1.加载顺序:引入标记的出现顺序, 页面上的js代码是js的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记的出现顺序, 标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执…

    编程技术 2025年4月4日
    100
  • jQuery实现响应滚动条事件功能方法

    本文主要介绍jquery响应滚动条事件功能,可实现针对滚动条状态的实时计算与响应功能,具有一定参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。 nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Trans…

    编程技术 2025年4月4日
    100
  • HTML和JS实现简单的计算器

    HTML和JS实现计算器功能的也是很容易的,本文主要和大家分享HTML和JS实现简单的计算器,希望能帮助到大家。 下面是代码:    nbsp;html>无标题文档 var result=””; function jisuan(num…

    编程技术 2025年4月4日
    100
  • 实现在HTML页面加载完毕后运行js方法

    本文主要和大家分享实现在HTML页面加载完毕后运行js方法,主要以代码的方法和大家分享,希望能帮助到大家。 Js方法: window.onload=function (){ var userName=”xiaoming”; alert(us…

    编程技术 2025年4月4日
    100
  • JavaScript实现获取远程的html到当前页面中

    今天做个项目,需要在当前的html页面中引用一个远程的html页面,百度了一下,发现一个非常好用的代码,这里分享给大家,有相同需求的小伙伴可以来看看 html代码 登录后复制 立即学习“Java免费学习笔记(深入)”; javascript…

    编程技术 2025年4月4日
    200
  • JavaScript模块优化

    给大家分享一下如何才能开发出更好的javascript模块和功能,有兴趣的朋友参考学习下吧。 不少人都曾经在 npm 上发布过自己开发的 JavaScript 模块,而在使用一些模块的过程中,我经常产生“这个模块很有用,但如果能 xxx 就…

    编程技术 2025年4月4日
    100
  • phpstorm怎么用jquery啊

    直接使用phpstorm打开jquery.js就可以了,如果是压缩版的jquery.min.js,可以使用phpstorm提供的代码格式化来美化一下,点击Code->Reformat Code 来格式化。 PhpStorm 是 Jet…

    2025年4月2日
    200
  • 适用于JavaScript开发人员的10个必备VSCode扩展

    如今,visual studio code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从sublime和atom那里。然而它的成功关键是源于能提供更好的性能和稳定的表现。 另外,它还提供了如代码智能提示等开发…

    2025年4月2日 编程技术
    200
  • 提高 JavaScript 开发效率的高级 VSCode 扩展!

    如今,visual studio code无疑是最流行的轻量级代码编辑器。vs code的强大无疑来自于它的插件市场。多亏了开源社区,vs code现在几乎对所有的编程语言、框架和开发技术都有支持。 提供这种支持的方式是多样的,主要包括了为…

    2025年4月2日 编程技术
    200

发表回复

登录后才能评论