Program Tip

주어진 선택기와 일치하는 부모가있는 항목을 제외하는 JQuery 선택기는 무엇입니까?

programtip 2020. 10. 29. 19:15
반응형

주어진 선택기와 일치하는 부모가있는 항목을 제외하는 JQuery 선택기는 무엇입니까?


나는 가지고있다

var $set = $('.foo,.bar').filter(
    function() {return $(this).parents('.baz').length < 1;});

수업 중 모든 요소를 선택하는 방법으로 foo또는 bar누구의 클래스 요소에서 내려하지 않습니다를 baz. 필터링 람다 없이도 동일한 작업을 수행 할 수있는 선택기가 있습니까?

<div class='foo'/><!--match this-->
<div class='bar'/><!--match this-->
<div class='baz'>
    <div class='foo'/> <!--don't match this-->
</div>

문제의 진실은 jQuery가 원하는 작업을 수행하는 특히 우아한 방법이 없다는 것입니다. 혼돈의 대답이 작동하는 동안 복잡한 선택기 (복잡한 웹 페이지에있는 선택기만큼 느릴 수 있음)가 더 장황하지만 더 빠른 필터 기능보다 그만한 가치가 있는지 궁금해해야합니다. 이것은 그다지 큰 거래가 아닙니다. 저는 피할 수있을 때 특히 길고 복잡한 선택자가 개인적으로 지쳤습니다.

다른 옵션은 jQuery가 훌륭하기 때문에 자신 만의 선택기를 만드는 것입니다.

jQuery.expr[':'].parents = function(a,i,m){
    return jQuery(a).parents(m[3]).length < 1;
};

$('.foo,.bar').filter(':parents(.baz)');

expr:지도는 여기에서 찾을 수있는 지글 지글 선택 엔진 및 문서의 일부입니다 지글 지글 사용자 정의 의사 선택기


$('.foo:not(.baz .foo),.bar:not(.baz .bar)')

이 작업을 수행 할 수 없습니다.

$(".children:not(#parent .children)");

그러나 나는 이것을 작동시킬 수 있습니다.

$(".children").not($("#parent .children"));

참고 : 1.2.6을 사용중인 jQuery 버전과 관련이 있는지 확실하지 않습니다.


이걸로 해봐:

$('div').filter(function () {
  return ($(this).parent().not('.baz'));
})

선택자 혼돈 이 작동합니다.

$('.foo:not(.baz .foo),.bar:not(.baz .bar)')

css / jquery 선택기를 테스트하는 데 사용할 수있는 FireFinder 라는 FireBug 확장에 대한 팁을 제공하고자합니다 .

웹 사이트에서 : Firefinder는 Firebug (Firefox)의 확장이며 선택한 CSS 선택기 또는 XPath 표현식과 일치하는 HTML 요소를 빠르게 찾을 수있는 기능을 제공합니다. 콘텐츠를 동시에 보면서 페이지에서 CSS 선택기를 즉시 테스트 할 수 있으며 일치하는 요소가 강조 표시됩니다.


var $li = jQuery('li', this).not('.dropdown-menu > li');

저는 Roots 테마를 사용하고 있으며 드롭 다운을 '하위 메뉴'에서 '.dropdown-menu'로 변경합니다.


최상위 선택기에 : not ( '. baz')를 추가하십시오.

참고 URL : https://stackoverflow.com/questions/965816/what-jquery-selector-excludes-items-with-a-parent-that-matches-a-given-selector

반응형