javascript - 获取容器元素内具有 Id 的所有元素的性能明智且最快的方法

Question

我正在尝试重构并制作性能明智的代码。

代码的想法是用id或value更新所有元素的id或value当元素被删除/删除时需要更新

所以我想做的是获取容器元素内具有 Id 或 value 的所有元素(可以嵌套在 2 到 4 个元素中)。

目前，我正在使用 jQuery 来完成此任务。我在每个具有 Id 的元素上添加了一个类，并使用 jQuery .find() 来使用我分配给它们的类来获取所有该元素..这是我真的很讨厌我的代码，如果还有其他最好的方法的话，我也想改变。

那么有没有一种最快的方法和性能同时完成这项任务？

$("button").on("click", function(){
   $($(this).val()).remove();
   updateParagraph();
});

function updateParagraph() {
   $(".paragraphs").each(function(index, data){
   var dataId = data.id.split("-");
   var idIndex = dataId[dataId.length-1];
   var index = index + 1;
   if (index != idIndex) {
      dataId.splice(-1, 1);
      dataId.push(index);
      dataId = dataId.join("-");
      $(this).attr("id", dataId);
      setChildElementsId($(this), index)
    }
  });
}

function setChildElementsId(parent, inx) {
   $(parent).find(".id-holder").each(function(index, data){
     if (data.id) {
        var dataId = data.id.split("-");
        dataId.splice(-1, 1);
        dataId.push(inx);
        dataId = dataId.join("-");
        $(this).attr("id", dataId);
        if(isParagraph(data.tagName)) {
      	  $(this).text(inx);
        }
    }
    else if (data.value) {
      var dataValue = data.value.split("-");
      dataValue.splice(-1, 1);
      dataValue.push(inx);
      dataValue = dataValue.join("-");
      $(this).val(dataValue);  
    }
  });
}

function isParagraph(tagName){
	return tagName == "P";
};

<div id="container-1" class="paragraphs">
  <div id="header-container-id-1" class="id-holder">
    <h4>Header</h4>
  </div>
  <div id="paragraph-container-id-1" class="id-holder">
    <p id="id-1" class="id-holder">1</p>
  </div>
  <button value="#container-1" class="id-holder">delete</button>
</div>
<div id="container-2" class="paragraphs">
  <div id="header-container-id-2" class="id-holder">
    <h4>Header</h4>
  </div>
  <div id="paragraph-container-id-2" class="id-holder">
    <p id="id-2" class="id-holder">2</p>
  </div>
  <button value="#container-2" class="id-holder">delete</button>
</div>
<div id="container-3" class="paragraphs">
  <div id="header-container-id-3" class="id-holder">
    <h4>Header</h4>
  </div>
  <div id="paragraph-container-id-3" class="id-holder">
    <p id="id-3" class="id-holder">3</p>
  </div>
  <button value="#container-3" class="id-holder">delete</button>
</div>
<div id="container-4" class="paragraphs">
  <div id="header-container-id-4" class="id-holder">
    <h4>Header</h4>
  </div>
  <div id="paragraph-container-id-4" class="id-holder">
    <p id="id-4" class="id-holder">4</p>
  </div>
  <button value="#container-4" class="id-holder">delete</button>
</div>
<div id="container-5" class="paragraphs">
  <div id="header-container-id-5" class="id-holder">
    <h4>Header</h4>
  </div>
  <div id="paragraph-container-id-5" class="id-holder">
    <p id="id-5" class="id-holder">5</p>
  </div>
  <button value="#container-5" class="id-holder">delete</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

如果我正确理解您的问题，您希望更优雅地识别哪些元素具有“__-id-#”或简单的“id-#”形式的id。

如果是这种情况，请查看一些 more advanced jQuery selectors 。 Attribute Contains Selector 可能会满足您的需求。 .

例如，我认为 $(parent).find("[id*='id-']") 可能会做你想要做的事情。