본문 바로가기
Web/jQuery

[jQuery] jquery 클릭한 객체 속성값 추출 / closest find children 차이점

by 나비와꽃기린 2016. 8. 5.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

이야 뻘짓 했다~

 

게시글 목록을 그리는데 다음과 같이 게시글 모두 _boardItems라는 class를 가지고 있고

각 게시글마다 key값이 되는 docnum이라는 속성값을 가지고 있을 때

게시글 상세보기를 위해 클릭한 객체의 속성값을 가져오는걸 하고 싶었다.

 

그래서 closest find등을 조합해서 찾으려고 뻘짓을 하다가………………………………………

개념이 부족하다는 것을 꺠닫 -_-……………….

 

(1) children은 선택한 객체의 바로 밑 !!!!! ex) $(this).children()

(2) closest는 선택한 객체에서 가장 가까운거 !!!! ex) $(this).closest(‘td’)

           >>지금 같은 경우는 closesttd를 찾았으면 가장 첫 번째 td를 찾아서 속성값을 못 가져왔을 것

(3) find는 선택한 객체의 하위 모든 것 중 검색 !!!! ex) $(this).find(‘.classNm’)

      >>단 지금 같은 경우는 하위 중 1개의 a태그만 있었어야 찾을 수 있었다.

 

$(item).each(function(i, item){                  

           html.push('<tr class="_boardItems" >');

           html.push('<td class="tc" style="width:50px;">'+item.RNUM+'</td>');

           html.push('<td style="width:220px;"><a class="aTag" style="cursor:pointer;" docnum="'+item.DOCNUM+'" code="'+item.BRD_CD+'" type="'+item.BRD_TYPE+'" title="'+item.TITLE+'">'+getEllipsis(item.TITLE,220,'left','left')+'<div style="float:right;">'+item.replyCount+'</div></a></td>');

           html.push('<td class="tc" style="width:50px;">' + item.INSTIME.substring(2,10) + '</td>');

           html.push('</tr>');

           d_req++

});

 

$('._boardItems').on('click',function (){

 

           var _sObj =  $(this).find('a');

           var docnum= _sObj.attr('docnum');

 

});