jQuery将div识别为列表项

本文介绍了jQuery将div识别为列表项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道你不应该将div放在无序列表中，但我们可以说我们有下面提到的标记。使用jQuery我想定位每个第3个列表项：li：nth-child（3n）。看起来jQuery也将div作为列表项计数，即使我们指定li：eq（3n）。我们如何检测每个第3个列表项，而不管父元素中还有什么。什么是甚至写li：eq（3n）什么时候忽略'li'？

I know you're not supposed to put divs inside an unordered list, but lets say we have the markup noted below. with jQuery I would like to target every 3rd list-item: li:nth-child(3n). Looks like jQuery counts the div inside as a list-item as well, even though we specify li:eq(3n). How can we detect every 3rd list-item regardless of what else is inside the parent element. what's the point of even writing li:eq(3n) when 'li' is ignored?

html：

<ul class="hello">
    <div class="someDiv">a</div>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <div class="divider">b</div>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

jQuery：

$("ul.hello li:nth-child(3n)").css('color','red');

推荐答案

使用 nth-of-type（3n）像这样：

$("ul.hello li:nth-of-type(3n)").css('color','red');

例如nth-of-type（3n + 2） - 3代表一个周期大小，n是一个计数器，2表示何时开始

for example nth-of-type(3n+2) - 3 represents a cycle size, n is a counter, and 2 are when is beginning

DEMO：

DEMO : http://jsfiddle.net/N565K/2/

这篇关于jQuery将div识别为列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！