4

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

我需要在（每个）div 内的（每个）p 上添加类

如果 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>
4

4 回答 4

5

使用第一个孩子

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

然后：不是 

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

演示：小提琴

于 2013-06-19T16:29:37.050 回答
5

为简单起见，我建议：

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

JS 小提琴演示。

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

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

JS 小提琴演示。

参考：

于 2013-06-19T16:34:59.347 回答
0

另一种方法。

$('div').each(function(index, obj) {
    var c = $(this).is(':first-child') ? 'first' : 'notfirst';
    $(this).find('p').addClass(c);
})
于 2013-06-19T16:36:20.557 回答
0

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

如果您出于其他原因（另一个脚本？）添加类，那么您将需要 Javascript（例如，根据戴维斯托马斯的回答）。但是，在添加类时，您已经不得不使用 Javascript 来获取这些元素，那么为什么不在此时做任何您想做的事情呢？在大多数（可能不是绝对全部，但大多数情况下）情况下，没有必要使用 Javascript 来添加充当 Javascript 挂钩的类，因为您已经必须获取相关元素。

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

于 2016-11-04T12:37:23.757 回答