Jquery and JS get the li tag in ul

js Get all li under the element

var content=document.getElementById("content");
var items=content.getElementsByTagName("ul");
var itemss=items[2].getElementsByTagName("li");//Get the second li tag

or

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);
}

How to use jquery to get the last li under each ul

$(function(){

##$("ul").each (function(){
var y = $(this).children().last();
​ alert (y.text());
});
});

##jquery Gets the

clicked

• ##

  #                                                                                         List


 
• Answer list
 
• Question List

 

• Satisfaction List




Click that one and append the class="qhbg" style to that

• For example: click answer The list becomes

  ## " >Points list

                                                                           

                                                                          li>Satisfaction list
  

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

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

})

How jquery locates the penultimate element. For example, if there are 5 uls in a p, how can jquery lock the penultimate ul, second ul, and first ul style

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

Some learning about .each() traversing elements 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>

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

        

        

            

内容一

            

内容二

            

内容三

            

内容四

    

The test results were normal. Later, when I used it on an actual page, I found that when the li list above was changed, the p block below did not change with different blocks, thinking it was a css style. It conflicts with other styles in the actual page. After changing all

css selectors to unique ones, I found that the problem still exists, so I judged that it should be here:

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

  <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>

##For the li elements to be iterated with .each() The selector has been restricted so that it can only find the li tag in my tab to extract the index value. The problem is solved and I can go to sleep!

The above is the detailed content of Jquery and JS get the li tag in ul. For more information, please follow other related articles on the PHP Chinese website!