选择 $(this) 元素的父元素的兄弟姐妹

Question

我需要通过动态计算属于 li 的当前 li 来更新属于 $(this) 元素的父级兄弟姐妹的所有 li 的 id相同 "family" 每删除一个。

请注意，页面上有不止一个 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 属性不是一个好主意

Answer 2

您遇到的问题是您要删除该元素，然后尝试 select 基于它的元素。这将不起作用，因为该元素不再存在。要解决此问题，请先获取相关元素，然后执行删除。

请注意，您可以使用each()提供的索引参数来简化代码。另外，您重复了 top_title id。你应该把它设为 class。试试这个：

$('.customFieldUl').on('click', '.remove-button', function() {
  var $button = $(this);
  var $ul = $button.closest('.customFieldUl');
  
  $button.closest('.customFieldLi').remove();
  $ul.find('.customFieldLi').each(function(i) {
    $(this).prop('id', 'field_' + i);
    $(this).find('label.top_title').html('Custom Field #: <b>' + i + '</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 class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

还值得注意的是，动态更改 id 属性并不是一个好主意。它们注定是不可变的。

选择 $(this) 元素的父元素的兄弟姐妹

Selecting siblings of parent of $(this) element

javascript

jquery

selector

jquery-selectors