[javascript] jQuery : 비어 있지 않은 데이터 속성을 선택 하시겠습니까?

data-go-to비어 있지 않은 속성 이있는 모든 요소를 선택하려고합니다 .

나는 시도 $('[data-go-to!=""]')했지만 이상하게도 그렇게하면 페이지의 모든 단일 요소를 선택하는 것 같습니다.

답변

시험

$(':not([data-go-to=""])')

최신 정보:

누구도 길을 잃지 않기 위해이 답변은 이전 버전의 jQuery에서 작동하지만 미래 보장은 아닙니다. @gmo와 @siva의 답변이 모두 최신 버전에서 작동하는 것 같기 때문에 답변을 연기합니다.

답변

추가 참조와 마찬가지로 최신 ^{(14 년 5 월) (15 년 8 월) (16 년 9 월) ( 17 년 4 월) ( 18 년 3 월) ( 19 년 3 월) ( 20 년 5 월 )} …
다음과 함께 작동하는 답변 :

빈 문자열 :

는 경우 합니다 존재 및 수 의 값이 ^{(전혀 또는 없음)을}attr

    jQuery("[href]");

누락 된 속성 :

경우 수 존재 및 존재하는 경우, 있어야 어떤 가치를 가지고 attr

    jQuery("[href!='']");

아니면 둘다:

만약이 있어야 존재 & 가지고 있어야 어떤 값을 … attr

    jQuery("[href!=''][href]");

^{추신 : 더 많은 조합이 가능합니다 …}

예제 는 jsFiddle 에서이 테스트를 확인하십시오 .

jQuery v1.11.0 -> jsFiddle online test
jQuery v2.1.0 -> jsFiddle online test
jQuery v2.1.3 -> jsFiddle online test
jQuery v3.0.0-alpha1 -> jsFiddle online test
jQuery v3.1.1 Slim -> jsFiddle online test
jQuery v3.2.1 -> jsFiddle online test
jQuery v3.3.1 -> jsFiddle online test
jQuery v3.4.1 -> jsFiddle online test ^{5 월 28’20에 jsFiddle에서 사용 가능한 마지막 jQuery 버전}
jQuery Edge -> jsFiddle online test ^{jQuery edge 버전 (주의해서 사용)}

또는 여기에이 코드 스 니펫이 있습니다.

^{* 스 니펫은 jQuery v2.1.1을 실행 중입니다.}

코드 스 니펫 표시

jQuery('div.test_1 > a[href]').addClass('match');
jQuery('div.test_2 > a[href!=""]').addClass('match');
jQuery('div.test_3 > a[href!=""][href]').addClass('match');

div,a {
    display: block;
    color: #333;
    margin: 5px;
    padding: 5px;
    border: 1px solid #333;
}
h4 {
    margin: 0;
}
a {
    width: 200px;
    background: #ccc;
    border-radius: 2px;
    text-decoration: none;
}
a.match {
    background-color: #16BB2A;
    position: relative;
}
a.match:after {
    content: 'Match!';
    position: absolute;
    left: 105%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test_1">
    <h4>Test 1: jQuery('a[href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_2">
    <h4>Test 2: jQuery('a[href!=""]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>
<div class="test_3">
    <h4>Test 3: jQuery('a[href!=""][href]')</h4>
    <a href="test">href: test</a>
    <a href="#">href: #</a>
    <a href="">href: empty</a>
    <a>href: not present</a>
</div>

스 니펫 확장

답변

$('[data-go-to!=""]:[data-go-to]').each(function() {
    // Do Your Stuff
});

답변

‘data-attributename’이 있고 해당 값이 비어 있지 않습니다.

$('[data-attributename]:not([data-attributename=""])')

‘data-attributename’이 비어 있거나 없습니다 :

$('[data-attributename]')

JS Fiddle 예제

답변

간단한 선택기에 대해서는 잘 모르겠지만 다음을 사용할 수 있습니다 filter().

$('[data-go-to]').filter(
    function(){
        return ($(this).attr('data-go-to').length > 0);
    });

JS Fiddle 데모 .

참조 :

filter().

답변

문서 에 따르면
이것은 그것을해야합니다

:not([attr="value"])

데모

도움이 되었기를 바랍니다

답변

$('[data-go-to]:not([data-go-to=""])')

JSBIN