在jQuery更新元素后，如何使用“：nth-​​of-type”选择元素？

Question

我想用我通过jQuery添加的类来设置第一个元素的样式。

不幸的是，当我使用:nth-of-type(1)选择器时，我的CSS样式会被忽略。

Here is the Fiddle

单击“世界”按钮时，第一个单词应为红色，但不是。

如何在jQuery更新元素后使用:nth-of-type选择元素？

Answer 1

试试这个：

.hidden:first-child + .seen, .seen:first-child {
    color: red;
}

<强> Working Fiddle

更新以解决以下评论中所代表的问题：

.hidden:first-child ~ .seen, .seen:first-child {
    color: red;
}
.hidden:first-child ~ span.seen ~ span.seen {
    color: black;
}

<强> Working Fiddle

Answer 2

您正在使用jQuery，当CSS失败时，请回到它。这并不意味着内联样式，让我们继续使用类（修改后的fiddle）：

你的新CSS：

.hidden {
    display: none;
}

.seen {
    display: inline-block;
}

.first {
    color: red;
}

新课程.first取代您通过CSS匹配的尝试。我们将它应用于jQuery：

$( "button.1" ).click(function () {
    $("span.1").toggleClass("seen hidden");
    $("span").removeClass("first");
    $(".seen:first").addClass("first");
});

$( "button.2" ).click(function () {
    $("span.2").toggleClass("seen hidden");
    $("span").removeClass("first");
    $(".seen:first").addClass("first");
});

现在事情正在发挥作用，我们已经达到了通过我们的测试＆＃34; （尽管这里没有编写任何测试，但这是我们要做的）。下一步是重构。我们有一些重复的位。让我们把它清理干净吧。天真地我可以尝试这样做：

var selectFirst = function() {
    $("span").removeClass("first");
    $(".seen:first").addClass("first");
};

$( "button.1" ).click(function () {
    $("span.1").toggleClass("seen hidden");
    selectFirst();
});

$( "button.2" ).click(function () {
    $("span.2").toggleClass("seen hidden");
    selectFirst();
});

但实际上我们可以通过在HTML中移动一些信息并稍微改变我们的jQuery（工作fiddle）来做得更好：

我们的新HTML看起来像这样：

<span class="hidden" data-number="1">Hello</span>
<span class="hidden" data-number="2">World</span>
<span class="hidden" data-number="1">Hello</span>
<span class="hidden" data-number="2">World</span>

<button data-target-number="1">Hello</button>
<button data-target-number="2">World</button>

请注意data-属性的用法。更简洁，1和2作为类，实际上正在用无用的信息阻碍该属性。

让我们看看它对jQuery有什么影响：

$("button").click(function() {
    var number = $(this).data("target-number"),
        // This line could also be "span[data-number=" + number + "]"
        targetSelector = ["span[data-number=", number, "]"].join("");

    $(targetSelector).toggleClass("seen hidden");
    $(".first").removeClass("first");
    $(".seen:first").addClass("first");
});

那就是它，只有一个功能！不要重复自己。重构成功了。