jQuery: Pilih atribut data yang tidak kosong?

Question 1

Saya mencoba memilih semua elemen yang memiliki data-go-toatribut yang tidak kosong.

Saya sudah mencoba $('[data-go-to!=""]')tetapi anehnya tampaknya memilih setiap elemen di halaman jika saya melakukan itu.

Question 2

mencoba

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

MEMPERBARUI:

Demi tidak menyesatkan siapa pun, jawaban ini akan berfungsi di versi jQuery yang lebih lama tetapi tidak tahan masa depan. Karena @gmo dan @ siva jawaban keduanya tampaknya berfungsi dengan versi yang lebih baru, saya menunda (dan mendorong Anda untuk memberi suara positif) jawaban mereka .... dan tentu saja semoga hari Anda menyenangkan.

Question 3

Hanya sebagai referensi lebih lanjut, dan up-to-date ^{(may'14) (aug'15) (sep'16) (apr'17) (mar'18) (mar'19) ( may'20 )} ...
Jawaban yang sesuai dengan:

String kosong:

Jika harus ada & dapat memiliki nilai apa pun ^{(atau tidak sama sekali)}attr

    jQuery("[href]");

Atribut yang hilang:

Jika bisa ada & jika ada, pasti punya nilai attr

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

Atau keduanya:

Jika harus ada & harus memiliki nilai ... attr

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

^{PS : lebih banyak kombinasi dimungkinkan ...}

Periksa tes ini di jsFiddle untuk contoh:

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 ^{Versi jQuery terakhir tersedia di jsFiddle pada 28'20 Mei}
jQuery Edge -> jsFiddle online test ^{jQuery edge version (gunakan dengan hati-hati)}

Atau di sini, di SO dengan Cuplikan Kode ini .

^{* Snippet menjalankan jQuery v2.1.1}

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Question 4

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

Question 5

Memiliki 'data-atributename' dan nilainya tidak kosong:

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

Memiliki 'data-atributename' kosong atau tidak:

$('[data-attributename]')

Contoh JS Fiddle

Question 6

Saya tidak yakin tentang pemilih sederhana, tetapi Anda dapat menggunakan filter():

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

Demo JS Fiddle .

Referensi:

filter().

Question 7

Menurut dokumentasi, ini harus dilakukan

:not([attr="value"])

DEMO

Semoga ini membantu

Question 8

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

JSBIN

Question 9

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

Menggunakan :not, .not(), :emptydll hanya akan memeriksa apakah unsur itu sendiri kosong, tidak atribut data. Untuk itu Anda harus memfilter berdasarkan nilai atribut data.

BIOLA

Question 10

Ini berhasil untuk saya

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

Question 11

Coba ini :

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

Question 12

Ini bekerja untuk saya:

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

Answer 1

95

Saya mencoba memilih semua elemen yang memiliki data-go-toatribut yang tidak kosong.

Saya sudah mencoba $('[data-go-to!=""]')tetapi anehnya tampaknya memilih setiap elemen di halaman jika saya melakukan itu.

javascript jquery jquery-selectors custom-data-attribute Shpigford
sumber

Answer 2

76

mencoba

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

MEMPERBARUI:

Demi tidak menyesatkan siapa pun, jawaban ini akan berfungsi di versi jQuery yang lebih lama tetapi tidak tahan masa depan. Karena @gmo dan @ siva jawaban keduanya tampaknya berfungsi dengan versi yang lebih baru, saya menunda (dan mendorong Anda untuk memberi suara positif) jawaban mereka .... dan tentu saja semoga hari Anda menyenangkan.

Benjamin Oman
sumber

terima kasih, ini bekerja dengan baik! Saya hanya ingin memilih elemen gambar, jadi saya menambahkan $ (': not (img [data-go-to == ""]')

msanjay

2

Apakah ini tidak memilih semua elemen yang tidak memiliki atribut 'data-to-go' kosong? Ketika penanya menginginkan semua elemen dengan atribut itu tidak kosong? (sebagai jawaban Siva Charan memutuskan)

rodnaph

tidak benar-benar membutuhkan tanda kutip ganda baik ... seperti $('element:not([attribute=])'); // gets all of <element attribute="">atau$(':not([attribute=])'); // gets all of <* attribute="">

Anthony Hatzopoulos

2

Ini mendapatkan setiap elemen untuk saya, termasuk yang memiliki atribut data yang saya cari

Pengacara Setan

Sepertinya tidak berfungsi di Safari tetapi berfungsi $('[data-go-to!=""]:[data-go-to]').

Dan

Answer 3

terima kasih, ini bekerja dengan baik! Saya hanya ingin memilih elemen gambar, jadi saya menambahkan $ (': not (img [data-go-to == ""]')

msanjay

Answer 4

2

Apakah ini tidak memilih semua elemen yang tidak memiliki atribut 'data-to-go' kosong? Ketika penanya menginginkan semua elemen dengan atribut itu tidak kosong? (sebagai jawaban Siva Charan memutuskan)

rodnaph

Answer 5

tidak benar-benar membutuhkan tanda kutip ganda baik ... seperti $('element:not([attribute=])'); // gets all of <element attribute="">atau$(':not([attribute=])'); // gets all of <* attribute="">

Anthony Hatzopoulos

Answer 6

2

Ini mendapatkan setiap elemen untuk saya, termasuk yang memiliki atribut data yang saya cari

Pengacara Setan

Answer 7

Sepertinya tidak berfungsi di Safari tetapi berfungsi $('[data-go-to!=""]:[data-go-to]').

Dan

Answer 8

Hanya sebagai referensi lebih lanjut, dan up-to-date ^{(may'14) (aug'15) (sep'16) (apr'17) (mar'18) (mar'19) ( may'20 )} ...
Jawaban yang sesuai dengan:

String kosong:

Jika harus ada & dapat memiliki nilai apa pun ^{(atau tidak sama sekali)}attr

    jQuery("[href]");

Atribut yang hilang:

Jika bisa ada & jika ada, pasti punya nilai attr

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

Atau keduanya:

Jika harus ada & harus memiliki nilai ... attr

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

^{PS : lebih banyak kombinasi dimungkinkan ...}

Periksa tes ini di jsFiddle untuk contoh:

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 ^{Versi jQuery terakhir tersedia di jsFiddle pada 28'20 Mei}
jQuery Edge -> jsFiddle online test ^{jQuery edge version (gunakan dengan hati-hati)}

Atau di sini, di SO dengan Cuplikan Kode ini .

^{* Snippet menjalankan jQuery v2.1.1}

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Answer 9

6

ini dia. Beri suara positif untuk pengguna ini di sini. jawaban lama lainnya tidak berhasil untuk saya. Saya menggunakan contoh ketiga.

Valamas

Answer 10

Seconded @ Valamas-AUS

Adam Waite

Answer 11

Edit: Menambahkan Cuplikan Kode SO, sehingga Anda dapat mengujinya di sini.

gmo

Answer 12

Ini adalah salah satu yang berhasil. $(':not([data-go-to=""])')tidak berfungsi lagi

Matthieu Charbonnier

Answer 13

1

Terima kasih telah menjaga jawabannya tetap terbaru

Anthony C

Answer 14

19

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

Siva Charan
sumber

6

Yang ini berfungsi untuk string kosong dan atribut yang hilang, sempurna

adamJLev

4

pada May'14 tidak berfungsi, memberikan Unrecognized Expressionkesalahan.

coding_idiot

Answer 15

6

Yang ini berfungsi untuk string kosong dan atribut yang hilang, sempurna

adamJLev

Answer 16

4

pada May'14 tidak berfungsi, memberikan Unrecognized Expressionkesalahan.

coding_idiot

Answer 17

7

Memiliki 'data-atributename' dan nilainya tidak kosong:

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

Memiliki 'data-atributename' kosong atau tidak:

$('[data-attributename]')

Contoh JS Fiddle

Jelgab
sumber

1

Ini adalah satu-satunya jawaban yang masih berfungsi untuk saya di bulan Juni 2015.

AlexioVay

Answer 18

1

Ini adalah satu-satunya jawaban yang masih berfungsi untuk saya di bulan Juni 2015.

AlexioVay

Answer 19

Saya tidak yakin tentang pemilih sederhana, tetapi Anda dapat menggunakan filter():

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

Demo JS Fiddle .

Referensi:

filter().

Answer 20

4

Menurut dokumentasi, ini harus dilakukan

:not([attr="value"])

DEMO

Semoga ini membantu

Dhiraj
sumber

Answer 21

3

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

JSBIN

Shanimal
sumber

Answer 22

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

Menggunakan :not, .not(), :emptydll hanya akan memeriksa apakah unsur itu sendiri kosong, tidak atribut data. Untuk itu Anda harus memfilter berdasarkan nilai atribut data.

BIOLA

Answer 23

1

Ini berhasil untuk saya

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

Mardok
sumber

Ini adalah dua iterasi.

Jens

Answer 24

Ini adalah dua iterasi.

Jens

Answer 25

0

Coba ini :

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

Pascal Boutin
sumber

1

Tidak pergi. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

Shpigford

api.jquery.com/empty-selector api.jquery.com/not-selector Menurut ini, akan dianggap bekerja, sedih, itu akan menjadi solusi yang bersih!

Pascal Boutin

Answer 26

1

Tidak pergi. "Syntax error, unrecognized expression: [data-go-to:not(:empty)]"

Shpigford

Answer 27

api.jquery.com/empty-selector api.jquery.com/not-selector Menurut ini, akan dianggap bekerja, sedih, itu akan menjadi solusi yang bersih!

Pascal Boutin

Answer 28

0

Ini bekerja untuk saya:

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

V. Kovpak
sumber

jQuery: Pilih atribut data yang tidak kosong?

Jawaban:

String kosong:

Atribut yang hilang:

Atau keduanya:

Periksa tes ini di jsFiddle untuk contoh:

Atau di sini, di SO dengan Cuplikan Kode ini .