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

StackOverflow https://stackoverflow.com/questions/1009485

  •  06-07-2019
  •  | 
  •  

문제

클래스에 4개의 div 요소가 있다고 가정해 보겠습니다. .navlink, 클릭하면 다음을 사용합니다. .data() 라는 키를 설정하려면 'selected', 값으로 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-Attributes를 통해 설정된 데이터로만 작동합니다. 데이터를 설정하거나 변경하는 경우 .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 객체에 대한 참조를 저장하는 단일 JavaScript 변수를 갖는 것은 어떨까요?

2) 현재 선택된 요소에 클래스를 추가해 보는 것은 어떨까요?그런 다음 DOM에서 ".active" 클래스 등을 쿼리할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top