html教程

Jquery和JS获取ul中li标签

巴扎黑

Jun 27, 2017 pm 01:25 PM

javascriptjquery获取

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;i102b2aba98ff17351034c9eea133087c 点击的是那个25edfb22a4f469ecb59f1190150159c6

3d4bc9d7f79b2a13ff6f28661e2d6d07

      29648217c88beffc99ae7948b95b337528b32422842eba366a6e07bd1bffce8b积分榜5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c68fb0647cc270c6c60ce1679670afa6fc回答榜 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6e5043b093cc4bc2a46bfcf330245fc36提问榜5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6e5043b093cc4bc2a46bfcf330245fc36满意榜5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

点击那个就把在那个25edfb22a4f469ecb59f1190150159c6的追加class="qhbg"样式

比如：点击了回答榜变成

3d4bc9d7f79b2a13ff6f28661e2d6d07
      861f448a2c47375a88adcb954dabc95328b32422842eba366a6e07bd1bffce8b积分榜5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      29648217c88beffc99ae7948b95b33758fb0647cc270c6c60ce1679670afa6fc回答榜 5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6e5043b093cc4bc2a46bfcf330245fc36提问榜5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6e5043b093cc4bc2a46bfcf330245fc36满意榜5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

$(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 li<a href="http://www.php.cn/wiki/972.html" target="_blank">:first-child</a>').css('backgroundColor', '#000');

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

b585974ae3b7dba3039af53a9593f9c4
36518b6755320cded894dbc612a06472
93f0f5c25f18dab9d176bd4f6de5d30e
    00284fb0d514fe65fa5ecffac5d64ca0
    b2386ffb911b14667cb8f0f91ea547a7tab选项卡6e916e0f7d1e588d4f442bf645aedb2f
    46d5fe1c7617e3914f214aaf043f4ccf
        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}
    531ac245ce3e4fe3d50054a55f265927
    8b71ca9e2bbe85b0affe67a561c6202b2cacc6d41bbb37262a98f745aa00fbf0
    8019067d09615e43c7904885b5246f0a
        $(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");
                })
            })                
        })
    2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4e31972b32840e76c009cd8e13c9f4c0
        0840c441062c67185332150c03ca7be0
            ff6d136ddc5fdfeffaf53ff6ee95f185
                1fa8a7b27ff7df642885c2d0d746c3d0选项一bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6选项二bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6选项三bed06894275b65c1ab86501b08a632eb
                25edfb22a4f469ecb59f1190150159c6选项四bed06894275b65c1ab86501b08a632eb
            929d1f5ca49e04fdcb27f9465b944689
        94b3e26ee717c64999d7867364b1b4a3
        803c97d8346ca6b8da89108d684ef6bb
            666ce1a82c037b7e4362411cd7ab1c47内容一94b3e26ee717c64999d7867364b1b4a3
            e388a4556c0f65e1904146cc1a846bee内容二94b3e26ee717c64999d7867364b1b4a3
            e388a4556c0f65e1904146cc1a846bee内容三94b3e26ee717c64999d7867364b1b4a3
            e388a4556c0f65e1904146cc1a846bee内容四94b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

复制代码

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

$("#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代码改了一下：

复制代码

  8019067d09615e43c7904885b5246f0a
    $(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");
            })
          })                
        })
  2cacc6d41bbb37262a98f745aa00fbf0

复制代码

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

以上是Jquery和JS获取ul中li标签的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn