데이터 속성 값 별 JQuery 필터 개체

이 기사에서는 데이터 속성 값을 기반으로 jQuery를 사용하여 필터 요소를 필터링하는 방법에 대해 설명합니다. 다음 코드 스 니펫은 "proto_"로 시작하는 ID가있는 모든 div 요소를 선택하고 "state"값은 "열기"입니다.

JSfiddle Demo

var $el = $('div[id^=proto_]').filter(function() {
    return ($(this).data("state") == "open");
});
console.log($el);

최적화 된 버전

최적화 솔루션에 대한 Vlad에게 감사합니다 : JSFiddle 최적화 된 버전 데모

데이터 속성에 의한 jQuery 필터링 객체의 FAQ 데이터 속성을 기반으로 jQuery를 사용하여 객체를 필터링하는 방법은 무엇입니까? jQuery는 데이터 속성을 기반으로 객체를 조작하고 필터링하는 강력한 방법을 제공합니다. 이것은 jQuery의

함수를 사용하여 달성 할 수 있습니다. 함수를 사용하면 함수를 매개 변수로 지정할 수 있으며, 이는 true 또는 false를 반환해야합니다. 함수가 true를 반환하면 필터링 된 컬렉션에 요소가 포함됩니다. 기본 예는 다음과 같습니다.

이 예제는 모든 div 요소를 데이터 속성에 대한 "키"값으로 필터링합니다.

var $el = $('div[id^=proto_]').filter('div[data-state=open]').css('color','red');

의 차이점은 무엇입니까? 및 는 jQuery 객체에서 요소의 검색 범위를 좁히는 데 사용되는 jQuery 방법입니다. 주요 차이점은 다음과 같습니다.

는 일치하는 요소 세트를 함수 테스트와 일치하거나 통과하는 요소로 좁히고, 는 현재 일치하는 요소 컬렉션에서 각 요소의 후손을 가져 와서 선택기, jQuery 객체 또는 요소를 전달합니다. 필터.

함수에서 여러 데이터 속성을 사용할 수 있습니까?

예. 함수에 더 많은 조건을 추가하십시오. 예를 들면 :

.filter() 이 예제는 모든 div 요소를 데이터 속성 "value1"의 "key1"값과 데이터 속성 "value2"의 "key2"값으로 필터링합니다. .filter() 특정 문자열을 포함하는 데이터 속성 값을 기반으로 요소를 필터링하는 방법은 무엇입니까?

셀러가 포함 된 속성을 사용하여 속성 값에 특정 문자열이 포함 된 요소를 선택할 수 있습니다. 예를 들면 :

$('div').filter(function() {
  return $(this).data('key') === 'value';
});

이 예제는 문자열 "값"을 가진 div 요소를 포함하는 모든 데이터 속성 "키"값을 필터링합니다.

다른 jQuery 방법과 함께 사용할 수 있습니까? .filter() .find() 예. 예를 들어, 와 함께

를 사용하여 필터 요소의 스타일을 변경할 수 있습니다.

이 예제는 "value"의 "키"값으로 모든 div 요소의 텍스트 색상을 빨간색으로 변경합니다. .filter()

위 내용은 데이터 속성 값 별 JQuery 필터 개체의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!