Maison > Article > interface Web > Jquery et JS obtiennent la balise li dans ul
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 ul=p.childNodes.item(0);
var lis=ul.childNodes
for(var
i=0;i
}
);
$(
function
(){
$(
"ul"
).each(
function
(){
var
y = $(
this
).children().
last
();
alert(y.text());
});
});
;/li>
Cliquez dessus et ajoutez le style class="qhbg"
à cela
$(function(){
$('.anserdh li a').click(function(){
$('.anserdh li').removeClass('qhbg') ;
$(this).parent().addClass('qhbg');
})
})
$("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>
内容一
内容二
内容三
内容四
$("#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!