Maison  >  Article  >  interface Web  >  Jquery et JS obtiennent la balise li dans ul

Jquery et JS obtiennent la balise li dans ul

巴扎黑
巴扎黑original
2017-06-27 13:25:471713parcourir

js obtient tous les li sous l'élément

var content=document.getElementById("content"); items=content.
getElementsByTagName("ul" var); itemss=items[2].getElementsByTagName("li");//Obtenir la deuxième balise li

ou

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
}

);

Comment utiliser jquery pour obtenir le dernier li sous chaque ul

$(function (){

$("ul").each(function(){

     vary = $(this).children().last();

    alert(y.text());

});

});



jquery obtient
    celui sur lequel vous avez cliqué


                                                                                                    ;/li>

  • Liste de réponses li>
  • Liste de questions

  • Liste de satisfaction a>


Cliquez dessus et ajoutez le style class="qhbg"

à cela

  • . Par exemple : cliquez sur la liste de réponses pour devenir

    $(function(){

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

    })

    })

    Comment jquery localise-t-il l'avant-dernier élément. Par exemple, s'il y a 5 uls dans un p, comment jquery peut-il verrouiller l'avant-dernier style ul, le deuxième ul et le premier style 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');

    Un peu d'apprentissage sur les éléments traversants .each() dans jquery Les résultats du test étaient normaux. Plus tard, lorsque je l'ai utilisé sur une page réelle, j'ai découvert que lorsque la liste li ci-dessus changeait, le bloc p ci-dessous ne changeait pas en bloc css. le style était en conflit avec d'autres styles dans la page réelle. Après avoir remplacé tous les sélecteurs CSS par des sélecteurs uniques, j'ai constaté que le problème existait toujours, j'ai donc jugé qu'il devrait être ici :


    nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
        <meta>
        <title>tab选项卡</title>
        <style>
            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}
        </style>
        <script></script>
        <script>
            $(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");
                    })
                })                
            })
        </script>
    
    
        <p>
            </p><p>
                </p>
                      
    • 选项一
    •                 
    • 选项二
    •                 
    • 选项三
    •                 
    • 选项四
    •             
                     

                

    内容一

                

    内容二

                

    内容三

                

    内容四

        

    Jquery et JS obtiennent la balise li dans ul

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


    Ajout de restrictions au sélecteur de l'élément li à itérer avec .each(), afin qu'il ne puisse trouver que la balise li dans mon onglet pour obtenir chacun la valeur de l'index. Le problème est résolu, et je peux m'endormir !

  • Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn