有没有更简洁的方式来编写这个 jQuery？答案

【问题标题】：Is there a cleaner way of writing this jQuery?有没有更简洁的方式来编写这个 jQuery？
【发布时间】：2012-09-12 22:40:58
【问题描述】：

我可以把它写成一个循环吗？

$(document).ready(function(){
    $('#slideItems1').bxSlider();
    $('#slideItems2').bxSlider();
    $('#slideItems3').bxSlider();
    $('#slideItems4').bxSlider();
    $('#slideItems5').bxSlider();
});

我正在使用bxSlider，并且要使用多个画廊，您需要调用滑块并将其与每个项目相关联。我有时每页有 200 多个产品。

【问题讨论】：

我也强烈推荐该画廊。非常简洁和流畅。

标签： jquery loops for-loop

【解决方案1】：

我建议为此提供类名并使用类名访问它。

//slideritem is class name which you give to all which has to slider div

$(function()
{

    $('.slideritem').bxSlider();
});

【讨论】：

【解决方案2】：

您可以使用 attribute starts-with selector 选择 ID 以“slideItems”开头的所有元素：

$('[id^="slideItems"]').bxSlider();

大多数 jQuery 方法都是这种情况（大多数插件也允许这样做）。该方法适用于匹配集中的每个元素，因此不需要循环。您可以看到您使用的插件如何实现此功能in its source（注意对each 的调用，并注意this 指的是包含匹配元素集的jQuery 对象）：

this.each(function(){
    // make sure the element has children
    if($(this).children().length > 0){
        base.initShow();
    }
});

【讨论】：

我会尝试指定元素类型作为其中的一部分，以提高选择器的特异性
@CaffGeek - 为什么？它基于id 值进行选择，这些值在文档中是唯一的。它们与您应该得到的一样具体。
另外它不像这些 id 会随机出现在整个 dom 中。
性能。它们是特定于我们的，因为我们很快就会看到只有少数会匹配，但是，选择器引擎必须查看 DOM 中每个元素的 id。如果您将元素添加到选择器中，例如$('div[id^="slideItems"]').bxSlider();，那么它只需要查看divs（将 div 替换为实际的任何元素）。基本上它可以使用原生的 getElementsByClassName 来减少最初要检查的元素列表。
@CaffGeek - 在现实世界中，差异将是微不足道的。在大多数浏览器中，querySelectorAll 将同时用于这两种情况，并且在两种情况下的速度几乎相同。不过你是对的 - 如果该级别的性能是一个真正的问题，最好添加标签名称。

【解决方案3】：

简短但不是最佳的重写将是（如果幻灯片项列表是固定的）

$(function(){
    $('#slideItems1, #slideItems2, #slideItems3, #slideItems4, #slideItems5').bxSlider();
});

不过，我强烈建议只给他们上一堂课。说slideritem然后做

$(function(){
    $('.slideritem').bxSlider();
});

【讨论】：

【解决方案4】：

给所有元素一个类，然后使用该类选择它们。

$('.slideItems').bxSlider();

【讨论】：

【解决方案5】：

给你所有的幻灯片项目一个类，然后就做$('.slideItem').bxSlider();

【讨论】：

这不起作用。我为每个人做了class="element" id="slideItems1" 等，然后做了这个，只是崩溃了页面
@user1686277 - 如果你使用它，那么你需要给每个元素一个类名“slideItem”。您将不再需要id。