속성에서 배열을 만듭니다. 페이지에 추가하십시오.

Question

프로그래밍에 익숙하지 않은 이래로 제 뇌를 고생시키고있는 문제가 있습니다. 저는 이미지 갤러리를 운영하는 웹 사이트의 회원입니다. 갤러리 목록이있는 페이지를 볼 때 모든 갤러리에는 아이콘 아래에 태그가 있습니다. 각 아이콘 위로 마우스를 이동하는 것은 큰 번거 로움 때문에

<div class="id4"> 
    <a href="..."><img src="..."></a> 
    <div class="id44"> 
     <div class="tft" title="tag1, tag2"></div> 
     <div class="tft" title="tag3"></div> 
    </div> 
    <div class="tags"></div> 
</div> 
<div class="id4"> 
    <a href="..."><img src="..."></a> 
    <div class="id44"> 
     <div class="tft" title="tag1"></div> 
     <div class="tft" title="tag2"></div> 
    </div> 
    <div class="tags"></div> 
</div> 

, 나는 그들이 속한 갤러리 아래에있는 '제목'속성의 내부에 태그를 쓰는 사용자 정의 스크립트를 작성하고 싶었다. 이것은 지금까지 내가 얻을 수과 같습니다

$(".id44").after('<div class="tags"></div>'); 
$(".id44").each(function() { 
    var array = []; 
    $(".tft").each(function() { 
     var tags = $(this).attr("title"); 
     array.push(tags); 
    }); 
    console.log(array); 
}); 

는 않는 모든 갤러리가있는 한 콘솔 페이지에 여러 번 매 태그의 거대한 목록을 인쇄합니다. 현재 요소의 자손 인 .tft 요소

Answer 1

봐는 :

$(this).find(".tft").each(function() { 
    array.push(this.title); 
}); 

$(".tft") 혼자 tft의 클래스 모든 요소와 일치합니다.

나는 이런 식으로 모든 일을 작성합니다

$('.id44').each(function() { 
    var tags = $(this).find('.tft').map(function() { 
     return this.title; 
    }).get(); 

    $('<div>', { 
     'class': 'tags', 
     'text': tags.join(', ') 
    }).insertAfter(this); 
}); 

.map(...).get()

모든 태그의 배열을 만드는 코드를 작성 단지 짧은 방법입니다.

Answer 2

문제는 .tft이 (가) 반복되는 현재 .id44으로 제한되지 않는다는 것입니다. "selector", this을 사용하면 결과는 this-container로 제한됩니다. 또한 오른쪽에 태그를 추가하는 방법을 추가했습니다 .tag-div.

$(".id44").after('<div class="tags"></div>'); 
$(".id44").each(function() { 
    var array = []; 
    $(".tft", this).each(function() { 
     var tags = $(this).attr("title"); 
     array.push(tags); 
    }); 
    $(".tags", this).html(array.join(',')); 
});