.data () 키 / 값을 기반으로하는 필터 요소

.navlink클릭하면 .data()라는 키 'selected'를 다음 값으로 설정하는 데 사용하는 class와 함께 4 개의 div 요소가 있다고 가정합니다 true.

$('.navlink')click(function() { $(this).data('selected', true); })

새 항목 .navlink을 클릭 할 때마다 navlink나중에 조작 할 수 있도록 이전에 선택한 항목을 저장하고 싶습니다 . 를 사용하여 저장된 항목을 기반으로 요소를 선택하는 빠르고 쉬운 방법이 .data()있습니까?

청구서에 맞는 jQuery : 필터 가없는 것 같고 동일한 클릭 이벤트 내에서 다음을 시도했지만 어떤 이유로 작동하지 않습니다.

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

이 작업을 수행하는 다른 방법이 있다는 것을 알고 있지만 지금은을 통해 수행 할 수 있는지 대부분 궁금합니다 .data().

필터는 작동하지만 필터에 전달 된 함수의 일치하는 객체에 대해 true를 반환해야 필터를 잡을 수 있습니다.

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

기록을 위해 jquery로 데이터를 필터링 할 수 있습니다 (이 질문은 꽤 오래되었고 그 이후로 jQuery가 발전 했으므로이 솔루션도 작성하는 것이 옳습니다).

$('.navlink[data-selected="true"]');

또는 더 나은 (성능을 위해) :

$('.navlink').filter('[data-selected="true"]');

또는 data-selected세트로 모든 요소를 ​​얻으려면 다음을 수행하십시오.

$('[data-selected]')

참고 이 방법은 HTML-속성을 통해 설정 데이터를 작동합니다. .data()호출로 데이터를 설정하거나 변경 하면이 메서드는 더 이상 작동하지 않습니다.

플러그인을 매우 쉽게 만들 수 있습니다.

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

사용법 (라디오 버튼 확인) :

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

내가 눈치 챘은 두 가지 (그래도 적어 놓을 때 실수 일 수 있음).

1. 첫 번째 예 ( $('.navlink').click) 에서 점을 놓쳤습니다.
2. 필터가 작동하려면 값 ( return $(this).data("selected")==true) 을 반환해야합니다.

그 가치보다 더 많은 일처럼 들립니다.

1) 현재 선택된 element \ jQuery 객체에 대한 참조를 저장하는 단일 자바 스크립트 변수 만 있으면 안됩니다.

2) 현재 선택된 요소에 클래스를 추가하지 않는 이유는 무엇입니까? 그런 다음 DOM에서 ".active"클래스 등을 쿼리 할 수 ​​있습니다.