Jquery et JS obtiennent la balise li dans ul

巴扎黑

Libérer： 2017-06-27 13:25:47

original

1728 Les gens l'ont consulté

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

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

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

Classement par points

Liste de réponses

Liste de questions

Liste de satisfaction

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

于是我在

Copier après la connexion

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

Copier après la connexion

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!