jQuery 슬라이싱 및 클릭 이벤트

Question

이것은 아마도 정말 간단한 jQuery 질문일 것입니다. 그러나 문서에서 10분 후에도 대답할 수 없었기 때문에...

체크박스 목록이 있고 선택기로 가져올 수 있습니다. 'input[type=checkbox]'.사용자가 Shift 키를 누른 채 클릭하고 다양한 확인란을 선택할 수 있기를 원합니다.이를 수행하려면 목록에 있는 확인란의 색인을 가져와야 합니다. 그러면 해당 색인을 .slice(start, end).사용자가 상자를 클릭하면 색인을 어떻게 얻나요?

Answer 1

다음 선택기는 jQuery에서도 작동합니다. input:checkbox.

그런 다음 문자열을 묶을 수 있습니다 :gt(index) 그리고 :lt(index) 함께 필터링하므로 5~7번째 확인란을 원할 경우 다음을 사용합니다. input:checkbox:gt(4):lt(2).

현재 클릭한 확인란의 색인을 얻으려면 다음을 사용하십시오. $("input:checkbox").index($(this)).

Answer 2

이것은 빠른 해결책이지만 각 확인란에 다음과 같이 인덱스 힌트와 함께 고유 ID를 제공합니다.

<input id="checkbox-0" type="checkbox" />
<input id="checkbox-1" type="checkbox" />
<input id="checkbox-2" type="checkbox" />
<input id="checkbox-3" type="checkbox" />
<input id="checkbox-4" type="checkbox" />

그러면 쉽게 색인을 얻을 수 있습니다.

$(document).ready(function() {
  $("input:checkbox").click(function() {
    index = /checkbox-(\d+)/.exec(this.id)[1];
    alert(index);
  });
});

Answer 3

답변 감사드립니다, Samjudson님.

추가 실험을 통해 다음과 같이 사용할 수도 있다는 것을 알았습니다. $(':checkbox') 그들을 선택합니다.를 사용할 수 있다는 점이 흥미롭습니다. .slice() 기능을 사용하여 범위를 얻을 수 있지만 선택기에서 다음을 사용하여 수행할 수도 있습니다. :gt 그리고 :lt.나는 다음의 구문을 찾았습니다. .slice() 하지만 선택기 필터를 사용하는 것보다 더 깨끗합니다.

저는 Ryan Duffield의 솔루션을 별로 좋아하지 않는다고 말씀드리고 싶습니다. 왜냐하면 마크업 변경이 필요하고 코드 반복이 필요하기 때문입니다.

Answer 4

@고르가포르:때로는 문자 그대로 질문을 조금 덜 받아야 할 것 같아요.:-) 나는 당신이 일종의 색인을 요구하도록 잠겨 있다고 생각했습니다.제 생각에는 jQuery를 더 많이 사용할수록 일반적으로 그런 종류의 작업을 수행할 필요가 없다는 것을 알게 될 것입니다.