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

Question

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

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

这是Fiddle

当你点击"世界"按钮时，第一个单词应该是红色的，但它不是。

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

Answer 1

您正在使用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");
});

现在一切都正常了，我们已经到了"通过测试"的地步（尽管这里没有写测试，但这就是我们的目标）。下一步是重构。我们有一些重复的部分。让我们把它清理一下。天真的我可能会尝试这样做：

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（工作）：

我们的新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");
});

就这样，只有一个功能！不要重复自己。重构成功。

Answer 2

试试这个：

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

工作Fiddle

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

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

工作Fiddle