在容器元素中获取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-']")可能会做你想做的事情。

Answer 2

虽然我理解你想要做什么，但我不太明白你为什么要这么做。

除非有一些限制迫使你像以前那样组织你的HTML，好吧，不要这样做。

<div id="container-123" class="paragraphs">
  <h4>Header</h4>
  <p>1</p>
  <button type="button">delete</button>
</div>

删除<h4>和<p>周围的<div>，除非您出于某种样式原因需要它们。<button>不需要知道它ID，因为它是容器的子元素，所以您的删除处理程序可以利用这个事实：

$(document.body).on("click", "button", function() {
  $(this).closest('.paragraphs').remove();
});

如果存在需要特定ID的外力(例如，用于链接到锚点)，请将其保留在顶部容器元素上。如果您的CSS以ID为目标元素，则重构CSS。

Answer 3

我想用javascript回答你的问题。事实上，您不需要任何id-s

我希望我来得还不算太晚。

​

let buttons = Array.from(document.querySelectorAll(".id-holder"));

buttons.forEach(b => {
//for each button add an event listener
  b.addEventListener("click", () => {
    b.parentElement.parentElement.removeChild(b.parentElement);
    resetNums();
  });
});


function resetNums(){
// reseting the text inside the p
  let btns = Array.from(document.querySelectorAll(".id-holder"));
  btns.forEach((bt,i)=>{
    let theP = bt.parentElement.querySelector("p");
    theP.innerHTML = i+1;
  })
}

<div>
  <div>
    <h4>Header1</h4>
  </div>
  <div>
    <p>1</p>
  </div>
  <button class="id-holder">delete</button> 
</div>

<div>
  <div>
    <h4>Header2</h4>
  </div>
  <div>
    <p>2</p>
  </div>
  <button class="id-holder">delete</button>
</div>

<div>
  <div>
    <h4>Header3</h4>
  </div>
  <div>
    <p>3</p>
  </div>
  <button class="id-holder">delete</button>
</div>

<div>
  <div>
    <h4>Header4</h4>
  </div>
  <div>
    <p>4</p>
  </div>
  <button class="id-holder">delete</button>
</div>

<div>
  <div>
    <h4>Header5</h4>
  </div>
  <div>
    <p>5</p>
  </div>
  <button class="id-holder">delete</button>
</div>

​