javascript - 选择 $(this) 元素的父元素的同级元素

Question

我需要通过动态计数来更新作为 $(this) 元素的父元素的兄弟的所有 li 的 id每次删除时都会显示属于同一“家族”的 li。

请注意，页面上有多个 ul.customFieldUl，每个页面上有多个 li.customFieldLi。

$('.customFieldUl').on('click', '.remove-button', function() {
  var field = $(this).parents('li.customFieldLi');
  if (field.length) {
    field.remove();

    // PROBLEMATIC SELECTOR BELOW:
    $(this).parent().siblings().each(function(i) {
      var id = i + 1;

      $(this).prop('id', 'field_' + id);
      $(this).find('label#top_title').html('Custom Field #: <b>' + id + '</b> &raquo;');
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
  <li class="customFieldLi">
    <label id="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label id="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

Answer 1

在删除 LI 元素之前，您需要定位 LI 的 siblings()。

$('.customFieldUl').on('click', '.remove-button', function() {
  var field = $(this).closest('li.customFieldLi');
  //Take reference of siblings
  var siblings = field.siblings();
  
  //Remove element
  field.remove();

  // Now iterate and update properties.
  siblings.each(function(i) {
    var id = i + 1;
    $(this).prop('id', 'field_' + id);
    $(this).find('label#top_title').html('Custom Field #: <b>' + id + '</b> &raquo;');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
  <li class="customFieldLi">
    <label id="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label id="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

HTML 中的标识符必须是唯一的，您多次使用 id="top_title" 导致 HTML 无效

注意:我完全同意@Rory的评论，动态更改id属性不是一个好主意