javascript - 对多个 li 元素使用类与 id 示例 20 使用 knockout 和 jQuery，性能和可维护性哪个更好？

Question

<ul class="sellerDetails sellerdetailsData " data-bind="attr: { id: 'sellerdetailsData-' + $index()}">
 <li><span class="buyerprocess-sprite seller-name"></span>
    <p class="leftfloat">
        <span data-bind="attr: { id: 'seller-Person' + $index()}" class="seller-Person">
        </span>
        <br />
        <span data-bind="attr: { id: 'seller-Name' + $index()}" class="seller-Name font13 text-light-grey">
        </span>
    </p>
 </li>
 <li><span class="buyerprocess-sprite seller-masking-no"></span>
    <p class="leftfloat">
        <span data-bind="attr: { id: 'seller-Contact' + $index()}" class="seller-Contact">
        </span>
    </p>
 </li>
 <li><span class="buyerprocess-sprite seller-email"></span>
    <p class="leftfloat">
        <span data-bind="attr: { id: 'seller-Email' + $index()}" class="seller-Email"></span>
    </p>
 </li>
 <li><span class="buyerprocess-sprite seller-address"></span>
    <p class="leftfloat">
        <span data-bind="attr: { id: 'seller-Address' + $index()}" class="seller-Address">
        </span>
    </p>
    <p>
        <span class="font10 text-light-grey margin-left10">Your contact details have been shared
            with the seller</span></p>
 </li>
</ul>

我对这个 html 结构有一些疑问:

• 我们为每个 li 元素提供 ID。我们有20个这样的li元素。有人评论说，由于 ID 是全局存储的，这种方法会创建太多 ID，从而进一步妨碍 ID 查找。
• 如果我们不在每个 li 的每个元素级别使用 ID，而是通过类访问，它可以正常工作，但我觉得速度会更慢。

例如，如果我使用 ['seller-Person' + $index()] 单击 span，并且我必须访问 'seller-Name' + $index()，我们有两个选项:

• $('#seller-Name' + $(this).attr('id'))
• 或者 $(this).parents(.buyerprocess-sprite).find('.seller-Name')

我觉得第一个更清晰，应该更快。

我们如何决定哪种方法更好？

Answer 1

如果您使用 jquery，则可以通过 css 引用访问所有这些单独的 li 元素。这意味着您根本不需要使用 ID。

这是一个例子:

$("li:nth-child(2)").text("updated");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>one</li>
  <li>two</li>
</ul>