如何编写jQuery选择器来匹配ID以相同字符串开头的两个元素

我有两个加载程序映像，元素ID为loader1和loader2。我将以下内容绑定到第一个：

$('#loader1')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

如何将相同的代码绑定到loader2而不重复整个过程

$('#loader1, #loader2')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

请参阅文档。

这将有助于您：

$('div[id^=loader]')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })

我使用了div，但是您可以使用每个html标记来实现：p、span、b等等

您必须使用^=选择器，其中^=表示以开头。更多信息可在此处找到：。 此处列出了所有选择器：

您可以使用（

^=

）：

如果还可以包含标记名，这将对许多浏览器有所帮助，因为jQuery的选择器引擎可以在查看

id

值之前使用标记名缩小候选列表的范围。例如，如果两者都是

img

元素，则：

$("img[id^=loader]")
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

---

通常，正确的方法是给两个元素赋予相同的类名。。。如果需要处理2或3个以上的元素，这也会使处理变得更容易

<img src="image1.png" class="loader" id="loader1" />
<img src="image2.png" class="loader" id="loader2" />
<img src="image3.png" class="loader" id="completelyDifferentId" />

---

在速度方面不是最优的。这个选择器不能用浏览器的内部函数查询。@Alexey Lebedev:它可以用

querySelectorAll

（如果浏览器支持的话）。@Alexey:有趣的是，我只是想回去建议如何提高它的速度，尽管@Felix指出，在某些浏览器上它无论如何都会很快。@AKWF:Quick eye，我几乎马上就看到了，我想我已经在你注意到之前把更正滑进去了。德拉特是的，这比只列出您知道的id或类的元素要慢，但您不需要知道它们的每个名称和计数；）这适用于少数元素，但如果您需要对许多对象执行此操作，最好使用类。@Dutchie432:当然，但OP提到

2

元素。@Felix:当然。我并不是想从你的答案中抹去，我只是为了进一步澄清而修饰一下。如果你真的想选择一些ID相同的元素，你可以使用$（'[ID^=“value”]'）。否则，亚历克赛的回答是正确的。

<img src="image1.png" class="loader" id="loader1" />
<img src="image2.png" class="loader" id="loader2" />
<img src="image3.png" class="loader" id="completelyDifferentId" />

$('.loader').hide().ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});