Question

我需要通过动态统计属于同一个＆的id的当前li来更新$(this)元素之父的所有li的{{1}} ＃34;家庭＆＃34;每次移除一个。

请注意，页面上有多个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> »'); }); } });。

＆＃13;

<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>

＆＃13;

[JsonObject(MemberSerialization.OptIn)]
        public class elements
        {
            [JsonProperty]
            public string title { get; set; }
            [JsonProperty]
            public string image_url { get; set; }
            [JsonProperty]
            public string subtitle { get; set; }
            [JsonProperty]
            public default_action default_action { get; set; }
            [JsonProperty]
            public buttons[] buttons { get; set; }
        }
        [JsonObject(MemberSerialization.OptIn)]
        public class default_action
        {

            [JsonProperty]
            public string type { get; set; }

            [JsonProperty]
            public string url { get; set; }
        }
        [JsonObject(MemberSerialization.OptIn)]
        public class buttons
        {

            [JsonProperty]
            public string type { get; set; }

            [JsonProperty]
            public string url { get; set; }

            [JsonProperty]
            public string title { get; set; }
        }

＆＃13;

Answer 1

在删除siblings()元素之前，您需要定位LI 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属性并不是一个好主意

Answer 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属性不是一个好主意。它们是不可改变的。

选择$（this）元素的父级的兄弟姐妹

2 个答案: