jQuery Tentukan apakah kelas yang cocok memiliki id tertentu

96

Apa jQuery memiliki id yang setara dengan pernyataan berikut?

$('#mydiv').hasClass('foo')

sehingga Anda dapat memberikan nama kelas dan memeriksa apakah itu berisi id yang disediakan.

sesuatu seperti:

$('.mydiv').hasId('foo')
Nicholas Murray
sumber
Saya ingin menerapkan gaya ke div tertentu. Misalnya pada waktu buka semua dengan kelas foo akan ditampilkan, tetapi saya mungkin ingin mengalihkan satu instance kelas foo off yang memiliki id bar.
Nicholas Murray
1
Maka Anda hanya akan melakukan $('#bar.foo').toggle();Anda hanya akan memiliki satu id karena DIBUTUHKAN untuk menjadi unik untuk dokumen tersebut. jika Anda ingin hanya mengaktifkan id itu jika itu adalah kelas foomaka tambahkan saja kelas itu ke pemilih id. jika selektor menemukan himpunan kosong tidak akan terjadi apa-apa, jika selektor menemukan himpunan dengan hasil (yang hanya akan ada satu) maka itu akan mengalihkan elemen. Saya pikir Anda terlalu memikirkan ini.
ajaib
3
hanya untuk mengatakan itu membuat frustrasi orang mengatakan "mengapa kamu ingin melakukan itu?" ketika saya mencoba melakukan ini sekarang. Masalah dengan hasClass adalah ia mengembalikan True jika SETIAP elemen yang cocok dengan selektor memiliki kelas yang diberikan. Jadi di mana saya memiliki banyak p dengan kelas "kue" dan nama kelas tambahan untuk masing-masing ("satu", "dua" dll) Saya mengalami masalah. Saya ingin memilih set umum p.cake dan kemudian memiliki persyaratan (jika class = "one" - $ var = 23 - etc). Intinya adalah saya mencoba mengirimkan $ var yang berbeda tergantung pada nama kelas tambahan. Saya mencoba untuk tidak harus mengulangi seluruhnya
Stella

Jawaban:

171

Anda dapat memasukkan logika tersebut ke dalam selektor dengan menggabungkan beberapa pemilih . Misalnya, kita dapat menargetkan semua elemen dengan id tertentu, yang juga memiliki kelas tertentu:

$("#foo.bar"); // Matches <div id="foo" class="bar">

Ini akan terlihat mirip dengan sesuatu yang Anda tulis di CSS. Perhatikan bahwa ini tidak akan berlaku untuk semua #fooelemen (meskipun seharusnya hanya ada satu), dan tidak akan berlaku untuk semua .barelemen (meskipun mungkin ada banyak). Ini hanya akan mereferensikan elemen yang memenuhi syarat di kedua atribut.

jQuery juga memiliki .ismetode hebat yang memungkinkan Anda menentukan apakah suatu elemen memiliki kualitas tertentu. Anda dapat menguji koleksi jQuery terhadap pemilih string, Elemen HTML, atau objek jQuery lainnya. Dalam kasus ini, kami hanya akan memeriksanya dengan pemilih string:

$(".bar:first").is("#foo"); // TRUE if first '.bar' in document is also '#foo'
Sampson
sumber
32
1 untuk is(). Harus ada .hasId()pemilih hanya karena tampaknya seperti mitra yang jelas untuk .hasClass()benar - benar ...
Matt Fletcher
43

Saya mungkin akan menggunakan $('.mydiv').is('#foo');Yang mengatakan jika Anda tahu Id mengapa Anda tidak menerapkannya ke pemilih di tempat pertama?

prodigitalson
sumber
17
Mungkin kode tersebut akan menjadi fungsi panggilan balik yang perlu menangani kasus tertentu secara berbeda. Jadi, fungsi tersebut meneruskan objek jQuery secara otomatis dengan atribut yang tidak diketahui. Dalam hal ini, $ ('your answer'). Is ('helpful');
Peter G
1
Saya bisa memikirkan sejumlah alasan. Bagaimana jika Anda ingin menerapkan setelan khusus seluler, seperti jika suatu elemen memiliki id = "mobile". Mengapa tidak penting.
dipasang
Yah, hanya 1 elemen yang harus diberikan idjika tidak maka harus ada atribut lain ... Saya kira jika lokasi struktural elemen yang dimaksud berubah berdasarkan halaman atau klien / agen pengguna maka ok, tetapi selain itu .. .
ajaib
19

update: maaf salah paham pertanyaan, .has()jawaban dihapus .

Cara alternatif lain, buat .hasId()plugin

// the plugin
$.fn.hasId = function(id) {
  return this.attr('id') == id;
};

// select first class
$('.mydiv').hasId('foo') ?
  console.log('yes') : console.log('no');

// select second class
// $('.mydiv').eq(1).hasId('foo')
// or
$('.mydiv:eq(1)').hasId('foo') ?
  console.log('yes') : console.log('no');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

ewwink
sumber
5
Maaf, tapi saya rasa Anda salah menafsirkan pertanyaan: has () API melaporkan ini: Kurangi kumpulan elemen yang cocok menjadi yang memiliki turunan yang cocok dengan pemilih atau elemen DOM. OP menanyakan bagaimana cara menguji apakah elemen dengan kelas 'myDiv' juga memiliki Id foo, sementara has () akan mencari turunan dari 'myDiv' yang memiliki Id 'foo'.
Miringkan
7

Katakanlah Anda melakukan iterasi melalui beberapa objek DOM dan Anda ingin menemukan dan menangkap elemen dengan ID tertentu

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
</div>

Anda juga dapat menulis sesuatu seperti menemukan

$('#myDiv').find('#bar')

Perhatikan bahwa jika Anda menggunakan pemilih kelas, metode find akan mengembalikan semua elemen yang cocok.

atau Anda bisa menulis fungsi iterasi yang akan melakukan pekerjaan lebih lanjut

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
    <div id="fo1"><div>
    <div id="bar1"><div>
    <div id="fo2"><div>
    <div id="bar2"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).attr('id') == 'bar1')
       //do something with bar1
});

Kode yang sama dapat dengan mudah dimodifikasi untuk pemilih kelas.

<div id="myDiv">
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).hasClass('bar'))
       //do something with bar
});

Saya senang Anda memecahkan masalah Anda dengan index (), apa pun yang berhasil untuk Anda. Saya harap ini akan membantu orang lain dengan masalah yang sama. Bersulang :)

Nima Foladi
sumber
4
$('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ });
Runcing
sumber
masing-masing tidak dibutuhkan karena tidak akan pernah ada lebih dari satu #theMysteryId.
ajaib
2
Nah itu menghemat masalah untuk menugaskannya ke variabel, memeriksa untuk melihat apakah panjangnya tidak kosong, dan kemudian melanjutkan dengan kode. Jika selektor tidak cocok, jQuery tidak akan memanggil fungsi "setiap", jadi ini bagus dan bersih. Sekarang jika semua yang ingin Anda lakukan adalah memanggil beberapa jQuery API, tentu saja.
Pointy
4

Hanya untuk mengatakan saya akhirnya menyelesaikan ini menggunakan index ().

TIDAK ADA yang sepertinya berhasil.

Jadi untuk elemen saudara ini adalah solusi yang baik jika Anda pertama kali memilih oleh kelas umum dan kemudian ingin memodifikasi sesuatu yang berbeda untuk masing-masing kelas tertentu.

EDIT: bagi mereka yang tidak tahu (seperti saya) index () memberikan nilai indeks untuk setiap elemen yang cocok dengan selector, dihitung dari 0, tergantung urutannya di DOM. Selama Anda tahu berapa banyak elemen dengan class = "foo", Anda tidak memerlukan id.

Jelas ini tidak selalu membantu, tetapi seseorang mungkin merasa berguna.

Stella
sumber
3

Periksa apakah ID elemen ada

if ($('#id').attr('id') == 'id')
{
  //OK
}

Việt Anh
sumber
1

Anda juga dapat memeriksa apakah elemen id digunakan dengan melakukannya:

if(typeof $(.div).attr('id') == undefined){
   //element has no id
} else {
   //element has id selector
}

Saya menggunakan metode ini untuk dataTables global dan dataTables terurut tertentu

pengguna3379167
sumber
yang tidak terdefinisi harus dalam tanda kutip agar berfungsi seperti 'tidak terdefinisi'
Leo