javascript - 选择两个元素之间的某些元素 [jQuery]

Question

我想知道是否可以选择某些元素，在两点之间爬行 DOM。

下面是树的示例。我的愿望是选择具有 data-tagname 属性的所有 labels，从 input 开始，到 .parent 结束。然后的想法是将其设置为输入的名称，即 name="one_two_third_four"。

我可以通过显式向上遍历到相关元素来对特定 DOM 树执行此操作。例如:

$('input').each(function(){
    let label = 
        $(this).parent().parent()
               .parent().parent()
               .parent().parent()
               .prev('[data-tagname]')
               .attr('data-tagname')
          + '_' 
          + $(this).parent().parent()
               .parent().parent()
               .prev('[data-tagname]')
               .attr('data-tagname')
          + '_' 
          + $(this).parent().parent()
               .prev('[data-tagname]')
               .attr('data-tagname')
          + '_' 
          + $(this).prev('[data-tagname]')
                   .attr('data-tagname');
    $(this).attr('name', label);
    // 
    $(this).attr('placeholder', label);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="stop-here">
    <label data-tagname="one">1</label>
    <ul><li>
      <label data-tagname="two">2</label>
      <ul><li>
        <label data-tagname="three">3</label>
        <ul><li>
          <label data-tagname="four">4</label>
          <input type="text" id="startHere"/>
        </li></ul>
      </li></ul>
    </li></ul>
  </li>
</ul>

这种方法冗长且不灵活。由于结构并不总是相同(某些元素嵌套 5 次，其他元素嵌套 2 次)，因此它不能解决一般情况。

TL;DR

我正在寻找一种解决方案，从 A 点向上遍历 DOM 树，过滤掉好东西，然后在 B 点停止。也许我们从 A 到 B 并推送所有我们想要的元素选择了一个空数组？

Answer 1

您可以使用 .parentsUntil() 函数从每个 INPUT 向上遍历 DOM 到第一个 LI.parent:

$('input').each(function() {
    var $this = $(this);
    var name = $this
        .parentsUntil($this.closest('.stop-here').parent(), 'li')
        .map(
            function() { 
                return $(this).find('> label:first').attr('data-tagname');
            }
        )
        .toArray()
        .reverse()
        .join('_')
    ;
    
    $this.attr('name', name);
    $this.attr('placeholder', name);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="stop-here">
    <label data-tagname="one">1</label>
    <ul><li>
      <label data-tagname="two">2</label>
      <ul><li>
        <label data-tagname="three">3</label>
        <ul><li>
          <label data-tagname="four">4</label>
          <input type="text" id="startHere"/>
        </li></ul>
      </li></ul>
    </li></ul>
  </li>
</ul>

由于您想要包含 LI.stop-here，因此我们使用其父级作为 .parentsUntil() 的第一个参数。

然后我们使用 .map() 聚合所有 data-tagname 属性，将它们类型转换为数组，反转顺序，然后使用_ 作为分隔符。

最后，我们将每个 INPUT 的名称设置为该名称字符串。在您的示例中，这是“one_two_third_four”。