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

Posted 2023-05-09

【中文标题】选择 $(this) 元素的父级的兄弟姐妹

【英文标题】：Selecting siblings of parent of $(this) element

【发布时间】：2017-08-22 14:45:16

【问题描述】：

我需要更新所有li 中的id，它们是$(this) 元素的父元素的兄弟姐妹，方法是在每次删除时动态计算属于同一“家庭”的当前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>

【问题讨论】：

您正在删除它们并尝试使用....您希望它们如何工作？

【参考方案1】：

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

$('.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 属性不是一个好主意

【讨论】：

感谢您的补充说明，已将id="top_title" 更新为课堂。

【参考方案2】：

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

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

$('.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 属性并不是一个好主意。它们应该是不可变的。