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> 

Таким образом, вы можете выбрать все элементы с классом client.

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