jQuery - 하위 요소에서 상위 요소까지 클래스 추가

Question

각 별도의 앵커에서 다른 클래스를 부모 <li> 태그에 추가하려고합니다. 일반 HTML 코드는 다음과 같습니다

<ul class="list"> 
    <li> 
    <div>Title Text</div> 
    <span class="tag"><a href="#" class="Class1">Class1 Link</a>, <a href="#" class="Class2">Class2 Link</a>, <a href="#" class="Class3">Class3 Link</a></span> 
    </li> 
    <li> 
    <div>Title Text</div> 
    <span class="tag"><a href="#" class="Class4">Class4 Link</a>, <a href="#" class="Class5">Class5 Link</a>, <a href="#" class="Class6">Class6 Link</a></span> 
    </li> 
</ul> 

가장 가까운 jQuery를 스크립팅 내가 정도로 작품을 가지고 있지만 그것은 단지 그것을 발견하고 정렬되지 않은 목록에있는 모든 <li> 태그에 추가 최초의 앵커 클래스를 잡아입니다.

$(window).load(function() { 
    $('span.tag a').each(function(){ 
     var tagClass = $(this).attr("class"); 
     $('span.tag a').closest('li').addClass(tagClass); 
}); 

정상적으로 작동하려면 도움이 필요합니다.

Answer 1

$('span.tag a') 대신 $(this)을 사용하고, 후자는 모든 a 요소를 선택하고 이후 모든 부모 li 요소를 선택해야합니다.

$('ul.list > li').addClass(function() { 
    return $('span.tag a[class]', this).map(function() { 
     return this.className; 
    }).get().join(' '); 
}); 

http://jsfiddle.net/UXSa7/

: 당신은 또한 .addClass() 콜백 기능을 사용할 수 있습니다

Answer 2

당신은 그 요소의 클래스 이름을 사용, jQuery를 처음 a 태그 부모 li을 위해, 이로 인해 오히려 다시 그들 모두를 선택하는 것보다, 해당 인스턴스에 대한 올바른 부모를 찾기 위해 this 참조를 사용해야합니다.

$(window).load(function() { 
    $('span.tag a').each(function(){ 
     var tagClass = $(this).attr("class"); 
     $(this).closest('li').addClass(tagClass); 
    }); 
}); 

또한 DOM이 준비로 모든 자산이로드 될 때보다는 빨리이 실행을 대신 $(window).load(function() {의 $(function(){를 사용할 수 있습니다.