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 부분에 변수 (a)를 사용할 수 있으며 .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" />'); 
});