jQuery 오브젝트 Index 구하기
jQuery javascript
문제점 😅
여기 프로젝트에서 그리드 Tool로 내부 프레임 + jqGrid를 사용하는데, 사용자 편의성을 위해 row를 클릭 했을 때 체크박스가 체크되도록 해야 한다. row의 index는 어떻게 구할까?
해결책 😏
table의 td를 클릭 시, 해당 td가 속한 tr의 index를 알아야 한다.
$(function(){…})
$(function(){
fnInit();
})
제이쿼리 document.ready()를 통해 화면 모두 로드된 후에 fnInit() 함수 호출.
fnInit(){…}
function fnInit() {
var tdObj = $("div#codeMgtSimpleList > div:nth-child(2) > table.list > tbody:last-child > tr > td[name*=td_]");
tdObj.bind("click", function(){
var idx = $(this).parent().index();
var scr = 'tr#'+idx+' > td[name="col_check"] > input[type="checkbox"]';
$(scr).trigger("click");
});
$('th[name="col_check"] > input[type="checkbox"]').trigger("click"); // ds 전체 선택 셋팅
$('#codeGroupSe').focus();
}
간단하게 분석해보면…
var tdObj = $("div#codeMgtSimpleList > div:nth-child(2) > table.list > tbody:last-child > tr > td[name*=td_]");
우선 클릭 이벤트를 바인딩 할 오브젝트를 제이쿼리 선택자로 추출한다. td 중에서도 name이 td_로 시작하는 td에 대해서만 클릭 이벤트를 적용시킬 것이다.
tdObj.bind("click", function(){
var idx = $(this).parent().index();
var scr = 'tr#'+idx+' > td[name="col_check"] > input[type="checkbox"]';
$(scr).trigger("click");
});
tbObj에 대해서 클릭 이벤트를 바인딩한다. 여기서 클릭한 대상인 $(this)는 td를 의미하므로 그 부모인 tr의 index를 가져와야 한다. 또한 tr의 id를 tr#[number] 형식이므로, 해당 tr을 선택자로 추출하여 click 트리거 처리했다.
마무리 😎
제이쿼리 선택자로 특정 데이터 추출해오는 부분은 프로젝트 내부 프레임 워크나 소스에 따라 다르므로 차근차근 잘 적용해야되는 부분이고, 보통 index 구하는 방법은 클릭 이벤트 안에서 $(this).index(); 또는 obj.index(this);로 구할 수 있다.