Question

这是jsfiddle上的代码http://jsfiddle.net/KGDyR/

我需要在（每个）内部（每个）div

上添加类

如果p是div标签的第一个子节点，则添加class .first

如果没有添加.notfirst

所以输出就像这样

<div>
    <p class="first">p is first</p>
    <img src="http://projectfoo.com/images/foo_logo.gif" />
</div>

<div>
    <img src="http://projectfoo.com/images/foo_logo.gif" />
    <p class="notfirst">p is not first</p>
</div>

Answer 1

使用first-child

$("div p:first-child").addClass('first')

然后:not

$("div p:not(:first-child)").addClass('notfirst')

演示：Fiddle

Answer 2

我建议，为简单起见：

$('p').addClass(function(){
    return this.previousElementSibling === null ? 'first' : 'notfirst';
});

JS Fiddle demo

或者，在那些不支持previousElementSibling的浏览器中工作：

$('p').addClass(function(){
    return !$(this).prev().length ? 'first' : 'notfirst';
});

JS Fiddle demo

参考文献：

Answer 3

另一种方式。

$('div').each(function(index, obj) {
    var c = $(this).is(':first-child') ? 'first' : 'notfirst';
    $(this).find('p').addClass(c);
})

Answer 4

如果您仅使用first和notfirst类进行样式设置，则可以通过p:first-child和* + p纯粹使用CSS定位这些元素（即a p元素，它具有前一个兄弟，因此不是第一个孩子。）

如果你因其他原因（另一个脚本？）添加了这些类，那么你将需要Javascript（按照Davis Thomas's answer，比如说）。但是，在您添加类的时候，您已经不得不使用Javascript来获取这些元素，那么为什么不在那时做任何你想做的事情呢？在大多数（可能不是绝对全部，但大多数）情况下，没有必要使用Javascript来添加充当Javascript钩子的类，因为你已经不得不得到有问题的元素。

换句话说，如果您使用类进行样式化，则不需要Javascript;如果你将它们用作Javascript钩子，你可能不需要这些类。

检查<p>是否是第一个孩子</p>

4 个答案: