javascript - 我应该如何最好地搜索根据特定元素的 id 动态生成的自定义列表？

Question

因此，我有这样的场景，其中我有一个类“item”的 div 元素列表，并且想要遍历这些元素以查找具有特定属性的元素。

示例 HTML:

<div> 
    <div class='item' data-id='bob123'>Bob</div>
    <div class='item' data-id='tedddd'>Ted</div>
    <div class='item' data-id='mikester'>Mike</div>
    <div class='item' data-id='joeyboy'>Joe</div>
</div>

使用该列表，我当前选择特定元素的方法是通过 dataset 属性，我将人员的 ID 存储在 data-id 下。

使用 JQuery，我有:

var specificElement = $('.item[data-id=(user id)]);

然后，我对该元素执行操作，例如突出显示、显示和隐藏。

现在，我的困境是这是否真的是筛选列表的有效方法，因为我听说访问数据集可能很慢。

我应该更改 HTML 模式并以不同的方式存储 id(例如使用类列表)吗？我对是否用诸如 user_bob123 之类的 id 标记每个内容犹豫不决，因为我觉得这可能会在 html 的其余部分中产生冲突，尽管这将允许仅通过

进行访问

document.getElementById('user_' + id);

我愿意接受建议，并且由于选择元素是我的应用程序的常见部分，我希望确保尽可能高效地做到这一点。

Answer 1

HTML5 中没有数据集的概念。这些data- 属性只是自定义属性。也就是说，使用选择器检索元素时不会有任何其他情况下的额外开销，除非您通过 id 获取元素(即 document.getElementById)，这可以通过浏览器将 id 和元素存储在哈希表中进行优化，以便快速访问。

顺便说一句，如果您想优化对带有 data-id 的元素的访问，您应该能够将这些元素的引用存储在对象中并使用常规 JavaScript 函数访问它们:

// Vanilla JS!!
var items = [].slice.call(document.querySelectorAll(".item[data-id]"))
  .reduce(function(result, currentElement) {
    result[currentElement.getAttribute("data-id")] = $(currentElement);
    return result;
  }, {});

// Now access these elements by id, and you won't need to query the document
// anymore. Accessing object properties is actually faster than a selector:
var bob123Element = items["bob123"];

setTimeout(function() {
  bob123Element.hide();
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='item' data-id='bob123'>Bob</div>
  <div class='item' data-id='tedddd'>Ted</div>
  <div class='item' data-id='mikester'>Mike</div>
  <div class='item' data-id='joeyboy'>Joe</div>
</div>