jquery mendapat id yang berbeza

Jquery ialah perpustakaan JavaScript yang sangat popular digunakan untuk memudahkan manipulasi DOM dan pembangunan web. Dalam pembangunan, selalunya diperlukan untuk mendapatkan ID elemen yang berbeza untuk melaksanakan operasi yang berbeza pada mereka. Dalam artikel ini, kami akan meneroka cara mendapatkan id berbeza menggunakan Jquery dan melaksanakan kes penggunaan biasa.

1. Dapatkan id elemen tunggal

Mendapatkan id elemen tunggal ialah salah satu kegunaan paling biasa dalam Jquery. Biasanya, kita boleh menggunakan pemilih Jquery $("#id") untuk memilih elemen dan menggunakan kaedah attr('id') untuk mendapatkan nilai idnya. Sebagai contoh, jika kita mempunyai kod HTML berikut:

<div id="myDiv">这是一个Div元素 </div>

kita boleh menggunakan kod berikut untuk mendapatkan id elemen Div itu:

var myDiv = $("#myDiv").attr('id');

2. Dapatkan id berbilang elemen

Dalam Jquery, kita boleh menggunakan pemilih kelas untuk memilih berbilang elemen dan melintasinya menggunakan kaedah .each(). Kemudian kita boleh menggunakan kaedah attr('id') untuk mendapatkan nilai id setiap elemen. Sebagai contoh, jika kita mempunyai kod HTML berikut:

<div id="div1" class="myDiv">Div元素1 </div>
<div id="div2" class="myDiv">Div元素2 </div>
<div id="div3" class="myDiv">Div元素3 </div>

Kita boleh mendapatkan id elemen Div ini menggunakan kod berikut:

$('.myDiv').each(function(){
    var id = $(this).attr('id');
    console.log(id);
});

Ini akan mencetak id setiap elemen ke konsol .

3. Dapatkan id elemen anak dalam elemen induk yang dipilih

Dalam sesetengah kes, anda mungkin perlu mendapatkan semua id elemen anak dalam elemen induk, contohnya Bina menu navigasi. Kita boleh menggunakan kaedah .find() untuk memilih semua elemen anak dalam elemen induk dan melintasinya menggunakan kaedah .each(). Kemudian kita boleh menggunakan kaedah .attr('id') untuk mendapatkan nilai id bagi setiap elemen anak. Contohnya, jika kita mempunyai kod HTML berikut:

<div id="menu">
    <ul>
        <li id="home">主页</li>
        <li id="about">关于</li>
        <li id="contact">联系我们</li>
    </ul>
</div>

Kita boleh mendapatkan id elemen kanak-kanak ini menggunakan kod berikut:

var menu = $("#menu");
menu.find('li').each(function(){
    var id = $(this).attr('id');
    console.log(id);
});

Ini akan mencetak id setiap elemen kanak-kanak ke konsol.

4. Dapatkan id elemen borang

Dalam pembangunan web, elemen borang biasanya perlu mendapatkan id mereka untuk pengesahan dan penyerahan borang. Kita boleh menggunakan pemilih Jquery $(":input") untuk memilih semua elemen borang dan mengulanginya menggunakan kaedah .each(). Kemudian kita boleh menggunakan kaedah .attr('id') untuk mendapatkan nilai id setiap elemen borang. Sebagai contoh, jika kita mempunyai kod HTML berikut:

<form>
    <input type="text" id="name" name="name" value="请输入姓名">
    <input type="email" id="email" name="email" value="请输入邮箱">
    <input type="tel" id="phone" name="phone" value="请输入联系电话">
    <button type="submit" id="submit">提交</button>
</form>

Kita boleh mendapatkan id elemen borang ini menggunakan kod berikut:

$('form :input').each(function(){
    var id = $(this).attr('id');
    console.log(id);
});

Ini akan mencetak id setiap elemen borang ke konsol.

5. Dapatkan id elemen yang ditambah secara dinamik

Dalam sesetengah kes, anda mungkin perlu menambah elemen secara dinamik secara pemprograman dan dapatkan idnya. Dalam kes ini, kita boleh menggunakan pemilih Jquery $(":last") untuk memilih elemen terakhir dan menambah elemen baharu selepas menggunakan kaedah .after(). Kemudian kita boleh mendapatkan id elemen baharu menggunakan kaedah .attr('id'). Contohnya, jika kita mempunyai kod HTML berikut:

<div id="myDiv">
    <button id="btn1">按钮1</button>
</div>

Kita boleh menggunakan kod berikut untuk menambah butang baharu secara dinamik dan mendapatkan idnya:

var newButton = $('<button id="btn2">按钮2</button>');
$("#myDiv button:last").after(newButton);
var id = newButton.attr('id');
console.log(id);

Ini akan mencetak id baharu butang ke konsol.

Kesimpulan

Dalam artikel ini, kami telah melihat secara mendalam cara mendapatkan id bagi elemen yang berbeza menggunakan Jquery. Sama ada anda mendapat id satu elemen atau berbilang elemen, atau mendapatkan id unsur bentuk atau elemen ditambah secara dinamik, anda boleh menggunakan kaedah di atas untuk mencapainya. Saya harap artikel ini akan membantu kerja pembangunan anda!

Atas ialah kandungan terperinci jquery mendapat id yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!