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

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

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

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

추가적인 참고 자료와 최신^{(may'14) (aug'15) (sep'16) (apr'17) (mar'18) (mar'19) (may'20) (jan'22)} 정보...
다음과 함께 사용할 수 있는 답변:

###빈 문자열:가 존재해야 하고 어떤 가치를 가질 수 있는 경우

    jQuery("[href]");

###귀속성 누락:만약 존재할 수 있다면 그리고 존재한다면, 반드시 어떤 값을 가져야 합니다.

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

###또는 둘 다: 반드시 존재해야 하고 어떤 가치가 있어야 한다면...

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

---

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

---

###jsFiddle에서 이 테스트의 예를 확인합니다.

• jQuery v1.9.1 -> jsFiddle online test
• jQuery v1.11.0 -> jsFiddle online test
• jQuery v2.1.0 -> jsFiddle online test
• jQuery v2.1.3 -> jsFiddle online test
• jQuery v2.2.4 -> jsFiddle online test
• jQuery v3.2.1 -> jsFiddle online test
• jQuery v3.3.1 -> jsFiddle online test
• jQuery v3.4.1 -> jsFiddle online test ^{jsFiddle에서 이용 가능한 마지막 jQuery 버전 jan 10'22}
• jQuery Edge -> jsFiddle online test ^{jQuery Edge 버전(주의와 함께 사용)}
• jQuery v3.0.0-alpha1 -> jsFiddle online test
• jQuery v3.1.1 Slim -> jsFiddle online test
• jQuery v3.2.1 Slim -> jsFiddle online test
• jQuery v3.3.1 Slim -> jsFiddle online test
• jQuery v3.4.1 Slim -> jsFiddle online test ^{jsFiddle에서 마지막 jQuery Slim 버전을 1월 10일 22분에 구입할 수 있습니다.}

---

###또는 이 코드 스니펫을 가진 SO에서.
^{* 스니펫이 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>

해라

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

업데이트:

이 답변은 이전 버전의 jQuery에서 사용할 수 있지만 미래에 도움이 되지는 않습니다.@gmo와 @siva의 답변이 모두 최신 버전에서 작동하는 것 같기 때문에, 저는 그들의 답변에 동의합니다. 물론 당신이 환상적인 하루를 보내길 바랍니다.

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

'data-attribute name'(데이터 속성 이름)이 있고 값이 비어 있지 않습니다.

$('[data-attributename]:not([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=""])')

제이에스빈

$('[data-go-to]').filter(function() {
    return $(this).data('go-to')!="";
});

사용.:not,.not(),:empty등은 데이터 속성이 아닌 요소 자체가 비어 있는지만 확인합니다.이를 위해서는 데이터 속성 값을 기준으로 필터링해야 합니다.

피들

이거 나한테 효과가 있어요.

$('[attributename]').filter('[attributename!=""]')

시도해 보기:

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

이것은 저에게 효과가 있습니다.

$('.data .title td[data-field!=""]')

언급URL : https://stackoverflow.com/questions/10641258/jquery-select-data-attributes-that-arent-empty