Jquery and JS get the li tag in ul

巴扎黑

Release： 2017-06-27 13:25:47

Original

1776 people have browsed it

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

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

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)

Copy after login

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

Copy after login

$('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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>tab选项卡</title>
    <style type="text/css">
        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 type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(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>
</head>
<body>
    <p id="tab">
        <p id="title">
            <ul>
                <li class="titsh">选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
        </p>
        <p id="content">
            <p class="consh">内容一</p>
            <p>内容二</p>
            <p>内容三</p>
            <p>内容四</p>
    </p>
</p>
</body>
</html>

Copy after login

Jquery and JS get the li tag in ul

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区块加样式的时候失败。

于是我在

Copy after login

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

Copy after login

Jquery and JS get the li tag in ul

  <script type="text/javascript">
    $(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>

Copy after login

Jquery and JS get the li tag in ul ##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!