jquery - jQuery：在选择器中使用变量

Question

请注意，我不是 jQuery 大师，只是还在学习。

我有这个 looong 功能：

$('.client1 > *:first-of-type, .client2 > *:first-of-type, .client3 > *:first-of-type, .client4 > *:first-of-type, .client5 > *:first-of-type').append('<span class="jsi"/>');

它确实有效，是的，但我知道它效率不高且不易扩展，因为每次我必须添加一个新的“客户端”时，我都必须将它添加到选择器列表中。

所以我知道我可以为零件使用（一个）变量> *:first-of-type，也可以为零件使用“数组”（我不知道我说得对不对）.clientX。

老实说，这有点超出我的想象。

这是我尝试过的，但当然不起作用：

var fot = "> *:first-of-type";
$('.client1' + fot, '.client2' + fot, '.client3' + fot, '.client4' + fot, '.client5' + fot).append('<span class="jsi"/>');

发生的事情不仅是我不想重复自己，而且能够更有效地扩展它，因为需要将新客户添加到该功能中。

非常感谢您对此的任何帮助。

Answer 1

只需添加一个额外的类，就像client您不再需要所有这些东西一样。

<div class="client client1">..</div>
<div class="client client2">..</div>

所以你可以选择所有带有 class 的元素client。

$('.client > *:first-of-type').each(function() {
    $(this).append('<span class="jsi" />');
});