데이터 속성 값 별 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!