javascript - 为什么这个 var 只选择找到的第一个元素？

Question

我正在尝试选择具有以“Mod”开头的标题属性的每个元素的特定父级，并将它们放在一个我可以轻松控制的单个变量中。

var allMods= $('#main-element .object[title^="Mod"]').closest('.specific-parent');
$(allMods).hide();

但它只适用于第一个找到的元素，我不明白如何将 var 设置为每场比赛，有人可以帮帮我吗？

Answer 1

如果所有.object[title^="Mod"]元素都在#main-element容器内，它应该可以工作。

示例：Live Copy | 资源

HTML：

<div id="main-element">
  <div class="specific-parent">
    <div class="object" title="Mod1">Mod1 - turns green</div>
  </div>
  <div class="specific-parent">
    <div class="object" title="Mod2">Mod2 - turns green</div>
  </div>
  <div class="specific-parent">
    <div class="object" title="Mod3">Mod3 - turns green</div>
  </div>
</div>
<div>
  <div class="specific-parent">
    <div class="object" title="Mod4">Mod4 - does <strong>not</strong> turn green</div>
  </div>
</div>

JavaScript：

$('#main-element .object[title^="Mod"]').closest(".specific-parent").css("color", "green");

结果：只有其中.specific-parents的.object[title^="Mod"]元素#main-element变为绿色。

Answer 2

根据文档：

对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

你可能想要.parents()（注意 S，.parent() 也只返回一个元素）