jqueryは別のIDを取得します

Jquery は、DOM 操作と Web 開発を簡素化するために使用される非常に人気のある JavaScript ライブラリです。開発では、さまざまな要素に対してさまざまな操作を実行するために、さまざまな要素の ID を取得することが必要になることがよくあります。この記事では、Jquery を使用してさまざまな ID を取得し、一般的なユースケースを実装する方法を検討します。

1. 単一要素の ID の取得

単一要素の ID の取得は、Jquery で最も一般的な用途の 1 つです。通常、$("#id") Jquery セレクターを使用して要素を選択し、attr('id') メソッドを使用してその ID 値を取得できます。たとえば、次の HTML コードがある場合:

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

次のコードを使用して、Div 要素の ID を取得できます:

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

2. 複数の要素の ID を取得

Jquery では、クラス セレクターを使用して複数の要素を選択し、.each() メソッドを使用してそれらを走査できます。その後、attr('id') メソッドを使用して各要素の ID 値を取得できます。たとえば、次の HTML コードがある場合:

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

次のコードを使用して、これらの Div 要素の ID を取得できます:

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

これにより、各要素の ID がコンソールに出力されます。 。

3. 選択した親要素内の子要素 ​​ID を取得します

場合によっては、親要素内のすべての子要素 ​​ID を取得する必要がある場合があります (例: Build)ナビゲーションメニュー。 .find() メソッドを使用して親要素内のすべての子要素を選択し、.each() メソッドを使用してそれらを反復処理できます。次に、 .attr('id') メソッドを使用して、各子要素の ID 値を取得できます。たとえば、次の HTML コードがある場合:

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

次のコードを使用して、これらの子要素の ID を取得できます:

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

これにより、各子要素の ID がコンソール。

4. フォーム要素の ID を取得する

Web 開発では、通常、フォーム要素はフォームの検証と送信のために ID を取得する必要があります。 Jquery セレクター $(":input") を使用してすべてのフォーム要素を選択し、.each() メソッドを使用してそれらを反復処理できます。次に、.attr('id') メソッドを使用して、各フォーム要素の ID 値を取得できます。たとえば、次の HTML コードがある場合:

<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>

次のコードを使用して、これらのフォーム要素の ID を取得できます。

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

これにより、各フォーム要素の ID がコンソール。

5. 動的に追加された要素の ID を取得する

場合によっては、プログラムで要素を動的に追加し、その ID を取得することが必要になることがあります。この場合、Jquery セレクター $(":last") を使用して最後の要素を選択し、.after() メソッドを使用してその後に新しい要素を追加できます。次に、.attr('id') メソッドを使用して新しい要素の ID を取得できます。たとえば、次の HTML コードがある場合:

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

次のコードを使用して、新しいボタンを動的に追加し、その ID を取得できます:

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

これにより、新しいボタンの ID が出力されます。コンソール。

結論

この記事では、Jquery を使用してさまざまな要素の ID を取得する方法を詳しく説明しました。単一要素または複数要素の ID を取得する場合でも、フォーム要素または動的に追加された要素の ID を取得する場合でも、上記のメソッドを使用してそれを実現できます。この記事があなたの開発作業に役立つことを願っています。

以上がjqueryは別のIDを取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。