Heim  >  Artikel  >  Web-Frontend  >  Jquery und JS erhalten das li-Tag in ul

Jquery und JS erhalten das li-Tag in ul

巴扎黑
巴扎黑Original
2017-06-27 13:25:471711Durchsuche

js ruft alle li unter dem Element

var content=document.getElementById("content"); items=content.
getElementsByTagName("ul"); itemss=items[2].getElementsByTagName("li");//Holen Sie sich das zweite li-Tag
oder

var p=document.getElementById('a');

var ul=p.childNodes.item(0);

var lis=ul.childNodes; i=0;ialert("Item "+i+": "+lis.item(i).innerHTML>}




So verwenden Sie JQuery, um das letzte Li unter jedem Ul zu erhalten

$(function(){

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

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

    alert(y.text());

});

});


jquery erhält
    das angeklickte

    •                                                                                                ;/li>

    • Antwortliste li> 
    • Fragenliste
    • Zufriedenheitsliste a>




    Klicken Sie darauf und fügen Sie den class="qhbg"-Stil hinzu

    dazu

  • . Zum Beispiel: Klicken Sie auf die Antwortliste, um
    • Punktestand
    • Antwortliste

    • Fragenliste
    • > ;
    • Zufriedenheitsliste



    • $(function(){

      $('.anserdh li a').click(function(){

      $('.anserdh li').removeClass('qhbg') ;

      $(this).parent().addClass('qhbg');

      })

      })

      Wie findet JQuery das vorletzte Element? Wenn es beispielsweise 5 ULs in einem p gibt, wie kann JQuery den vorletzten UL, den zweiten UL und den ersten UL-Stil sperren?

      $("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');

      Einiges über das Durchlaufen von Elementen durch .each() in jquery


      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 und JS erhalten das li-Tag in ul

      Die Testergebnisse waren normal. Als ich es später auf einer tatsächlichen Seite verwendete, stellte ich fest, dass sich der p-Block unten nicht in andere Bereiche änderte, da ich dachte, dass das CSS Stilkonflikte mit anderen Stilen auf der tatsächlichen Seite. Nachdem ich alle CSS-Selektoren in eindeutige geändert hatte, stellte ich fest, dass das Problem immer noch besteht, also kam ich zu dem Schluss, dass es hier sein sollte:

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


      Jquery und JS erhalten das li-Tag in ul

        <script>
          $(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");
                  })
                })                
              })
        </script>

      Jquery und JS erhalten das li-Tag in ul

      Einschränkungen hinzugefügt Der Selektor des li-Elements muss mit .each() iteriert werden, sodass er in meinem Tab nur den li-Tag finden kann, um den Indexwert zu erhalten. Das Problem ist gelöst und ich kann schlafen gehen!

      Das obige ist der detaillierte Inhalt vonJquery und JS erhalten das li-Tag in ul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

      Stellungnahme:
      Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn