Question

我想选择所有元素父母及其第一个孩子，以及原始元素本身。这是标记的一个例子：

<ul id="end-here">
  <li>
    <a href="/path">Link</a>
  </li>
  <li class="select-me">
    <a class="select-me" href="/path">Another link</a>
    <ul>
      <li>
        <a href="/path">Submenu link</a>
      </li>
      <li class="select-me">
        <a class="select-me" id="start-here" class="change-me" href="/path">Another submenu link</a>
      </li>
    </ul>
  </li>
</ul>

所以从$（'#start-here'）开始我希望所有$（'。select-me'）停在$（'＃end-here'）

到目前为止我已经知道了

$('#start-here').add($('#start-here').parentsUntil('#end-here', 'li, a'))

然而，这会错过一个标记子项，因为它们不是原始元素的直接父项。因此，不包括以上元素：

<a class="select-me" href="/path">Another link</a>

Answer 1

您的示例代码与您要求的内容不匹配，“选择所有元素父母及其第一个孩子，以及原始元素本身”。这是示例代码的外观：

<ul id="end-here">
  <li class="select-me">
    <a href="/path">Link</a>
  </li>
  <li>
    <a class="select-me" href="/path">Another link</a>
    <ul>
      <li class="select-me">
        <a href="/path">Submenu link</a>
      </li>
      <li>
        <a class="select-me" id="start-here" class="change-me" href="/path">Another submenu link</a>
      </li>
    </ul>
  </li>
</ul>

jQuery选择器：

$("#start-here").parentsUntil("#end-here").andSelf().map(function(){
    return $(this).parent().children()[0];
});

以上内容返回示例中包含select-me类的四个元素。

但是，如果您的示例代码是正确的，那么选择过程不能是通用的或灵活的，您必须指定一些元素类型：

var elems = $("#start-here").parentsUntil("#end-here", "li");
elems.add(elems.children("a"));

感谢上述解决方案的Stano。

Answer 2

未经测试，但我认为应该是这样的：

$('#start-here').add($('#start-here').andSelf().parentsUntil('#end-here', 'li, a')).andSelf().children().first();

使用jQuery选择父元素和第一个子元素

2 个答案: