Question

我想更改标题p和其他p位于标题div旁边的p中的CSS设置

HTML结构

<div class="outerDiv">
    <p id="headline">My headline</p>
    <div id="listContainer">
        <p>Text 1</p>
        <p>Text 2</p>
        <p>Text 3</p>
        <p>Text 4</p>
    </div>
</div>

当前解决方案

当前，我使用jQuery的next()，children()和addBack()方法，但它仅选择子项，而不将其与标题p合并在一起。 （我想是因为addBack()返回了children的倒数第二个孩子（？））

$("p#headline").click(function() {
    $(this).next().children().addBack().css({"background-color": "#000", "color": "#fff"})
})

如何在不编写第二行的情况下同时选择children和标题p？（jQuery或javascript）

编辑

某些CSS设置基于变量的值，该值可能会发生变化

Answer 1

如何在不写第二行的情况下实现对孩子和标题p的选择？

您可以这样做：

$(this).next().children().add(this).css(/*...*/);

addBack不起作用，因为它添加了下一个元素，而不是this。

但是我不会那样做。相反，我会这样做：

$(this).closest(".outerDiv").addClass("some-class-named-semantically");

...并具有如下CSS规则：

.some-class-named-semantically #headline,
.some-class-named-semantically #listContainer p {
    background-color: #000;
    color: #fff;
}

我不知道单击此标题的含义，但是例如，如果选择它，则类名可能是selected。

重新编辑：

某些CSS设置基于变量的值，该值可能会发生变化

通常可以用主题类解决。但是无论如何，在此答案的开头都会回答您提出的主要问题。

如何在一行中选择此元素和下一个元素的子代？

1 个答案: