有人可以解释为什么我的相邻选择器在 jQuery 中没有按预期工作吗？答案

【问题标题】：Could someone explain why my Adjacent Selector isn't working as expected in jQuery?有人可以解释为什么我的相邻选择器在 jQuery 中没有按预期工作吗？
【发布时间】：2014-10-13 21:09:03
【问题描述】：

$(document).ready(function () {
    $("#collapsible").click(function () {
        $("h3 + *").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="collapsible">Technical Specs:</h3> <!-- Needs to be clickable -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

<h3 id="collapsible">Ordering Information</h3>
<p>To order please call us at 0-000-000-0000</p>

根据大量 CSS 教程，我了解到 x + y 会选择紧跟在 x 之后的任何 y强>。所以我认为 h3 + * 会选择直接出现在我的 h3 之后的任何（通配符）元素。但它并没有像我预期的那样工作，为什么会这样？

【问题讨论】：

您有 2 个具有相同 ID 的元素。如果你点击Ordering Information，那么不，它不起作用。
重复的ids 是无效标记。在标记修复之前，行为是完全未定义的。
@Squint 好的，所以 CSS 选择器工作正常，它只是找到了两个可折叠项？如果您想将其作为答案，我会接受。
不，它只找到第一个。 jQuery 将在第一次匹配后停止，因为当您的选择器仅用于 ID 时，它使用 getElementById，而 getElementById 永远不会找到多个元素。

标签： javascript jquery css jquery-selectors

【解决方案1】：

您有 2 个具有相同 ID 的元素。如果您单击订购信息，那么不，它不会起作用，因为它只会找到第一个。

The reason jQuery will only return a single match when the selector is only an ID selector is because it optimizes to use getElementById in that case, and getElementById never finds more than one element.

如果您希望两个 h3 元素都是可点击的，则将它们的 ID 设为 CLASS，并使用 $(".collapsible") 来选择两者。元素可以共享一个类，类选择器将返回所有具有该类的元素。

但是，在您的事件处理程序中，您选择了所有 h3 + * 元素，这可能也不是您想要的。如果您只想选择下一个，则单击使用this，它表示单击的元素，然后导航到下一个元素。

如果你想在这种情况下使用选择器，你可以这样做：

$("+ h3", this)

或者只使用 jQuery 的一种 DOM 选择方法。

【讨论】：

谢谢，这是有道理的。我记下我认为我需要使用“this”，但我不明白为什么会这样。

【解决方案2】：

固定代码：

HTML：

<h3 class="collapsible">Technical Specs:</h3> <!-- Needs to be clickable -->
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>

    <h3 class="collapsible">Ordering Information</h3>       
    <p>To order please call us at 0-000-000-0000</p>

jquery：

$(".collapsible").click(function(){
    $(this).next("ul").toggle();
    $(this).next("p").toggle();
});

工作小提琴：http://jsfiddle.net/ejgk6r42/1/

【讨论】：