jQuery: เลือกแอตทริบิวต์ข้อมูลที่ไม่ว่างเปล่า?

ฉันกำลังพยายามเลือกองค์ประกอบทั้งหมดที่มีdata-go-toแอตทริบิวต์ที่ไม่ว่างเปล่า

ฉันได้ลองแล้ว$('[data-go-to!=""]')แต่แปลกพอที่จะเลือกทุกองค์ประกอบในหน้าถ้าฉันทำอย่างนั้น

ลอง

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

อัพเดท:

เพื่อไม่ให้ใครหลงทางคำตอบนี้จะใช้ได้กับ jQuery เวอร์ชันเก่ากว่า แต่ไม่สามารถพิสูจน์ได้ในอนาคต เนื่องจากคำตอบของ @gmo และ @ siva ทั้งคู่ดูเหมือนจะใช้ได้กับรุ่นที่ใหม่กว่าฉันจึงเลื่อน (และขอแนะนำให้คุณโหวต) คำตอบของพวกเขา .... และแน่นอนว่าคุณจะมีวันที่ยอดเยี่ยม

เช่นเดียวกับการอ้างอิงเพิ่มเติมและข้อมูลล่าสุด ^{(พ.ค. 57) (ส.ค. 15) (ก.ย. 59) (เม.ย. 60) (มี.ค. 61) (มี.ค. 62) ( พ.ค. 2563 )} ...
คำตอบที่ใช้ได้กับ:

สตริงว่าง:

หากต้องมีอยู่และอาจมีค่าใด ๆ^{(หรือไม่มีเลย)}attr

    jQuery("[href]");

ไม่มีแอตทริบิวต์:

ถ้าสามารถที่มีอยู่และถ้าอยู่จะต้องมีค่าบางอย่าง attr

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

หรือทั้งคู่:

ถ้าต้องมีอยู่ & ต้องมีค่า ... attr

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

^{PS : สามารถผสมได้มากขึ้น ...}

ตรวจสอบการทดสอบนี้ใน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 ^{jQuery เวอร์ชันล่าสุดพร้อมใช้งานใน jsFiddle ที่ 28 พฤษภาคม 20}
• jQuery Edge -> jsFiddle online test ^{jQuery edge รุ่น (ใช้ด้วยความระมัดระวัง)}

หรือที่นี่ใน SO พร้อมข้อมูลโค้ดนี้

^{* Snippet กำลังเรียกใช้ 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 ซอ

อ้างอิง:

• filter().

ตามเอกสาร นี้ควรทำ

:not([attr="value"])

การสาธิต

หวังว่านี่จะช่วยได้

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

JSBIN

$('[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!=""]')