jQueryを使用して要素のIDを変更する


302

jQueryを使用して要素のIDを変更する必要があります。

どうやらこれらは動作しません:

jQuery(this).prev("li").attr("id")="newid"
jQuery(this).prev("li")="newid"

次のコードでそれを実現できることがわかりました。

jQuery(this).prev("li")show(function() {
    this.id="newid";
});

しかし、それは私には正しくないようです。もっと良い方法があるに違いない?また、ない場合は、表示/非表示または他の効果の代わりに他にどのような方法を使用できますか?当然、IDを変更するだけで、毎回要素を表示/非表示にしたり、影響を与えたりする必要はありません。

(うん、私はjQuery初心者です。)

編集
この場合、クラスは使用できません。IDを使用する必要があります。


5
JavaScriptでは、変数(foo = 1)、オブジェクトのメンバー(foo.bar = 2またはfoo['bar'] = 2)、または配列の添え字(foo[0] = 3)に割り当てることができますが、演算子(x + b) = 5の結果()または関数呼び出しの結果(foo() = 1foo(x).bar(y) = 7)は意味をなさないので、jQueryやその他のJavaScriptライブラリでの動作にはなりません。
rakslice 2013

回答:


521

構文が正しくありません。2番目のパラメーターとして値を渡す必要があります。

jQuery(this).prev("li").attr("id","newId");

4
newIdは引用符で囲む必要があると思う
Jay Corbett、

5
要素をDOMから切り離して、代わりに新しいIDを持つ新しい要素に置き換える必要はありませんか?DOMの破壊を避けるために...?
cllpse 2008

15
jQueryがそれを処理します、roosteronacid。
McPherrinM 2009年

15
IDの再割り当てをダブルチェックしてここに到着しました-これは今の.prop( ... )代わりにすべき.attr( ... )ですか?
Carl

2
@Carlは最新のjqueryドキュメントと例によると、次のidように設定する必要がありますattr(...)
JoeBrockhaus

71

望ましいオプション.attrは次のように使用する.propことです:

$(this).prev('li').prop('id', 'newId');

.attr要素の属性を.prop取得しますが、属性が参照するプロパティ(つまり、実際に変更しようとしているもの)を取得します


4
.attrは非推奨になりました。これが正しい方法です。
PointlessSpike 2015年

7
この情報はどこから来たのですか?api.jquery.com/attrは非推奨について何も述べていません...
Sergej

非推奨ではありません。「jQuery 1.6以降、この.prop()メソッドは、.attr()属性を取得しながら、プロパティ値を明示的に取得する方法を提供します。」
イルミネーター

@Illuminator私はそれに応じて私の答えを修正しました。ありがとう。
Jeremy Moritz

45

あなたがやろうとしていることは:

jQuery(this).prev("li").attr("id", "newID");

これにより、IDが新しいIDに設定されます。


11

私はこの構成で似たようなことをしました

$('li').each(function(){
  if(this.id){
    this.id = this.id+"something";
  }
});

7

あなたの目標が何であるかはわかりませんが、代わりにaddClassを使用する方が良いでしょうか?私の考えでは、オブジェクトIDは静的で、そのオブジェクトに固有である必要があります。ページに表示されないように変更しようとしている場合は、IDを変更するのではなく、それらの詳細をクラスに入れてオブジェクトに追加します。繰り返しますが、私はあなたの下線を引く目標を理解せずに言っています。


3
レガシーシステムの喜び-あなたの痛みを理解します。エランの答えは間違いなく最高です。
Tim Knight、

5
実際にidを設定することは、HTMLでhidden-templatesを使用してDOMを構築し、jqueryを使用してそれらを複製する場合に役立つ、価値のあることです。
スティーブナイト


2
<script>
       $(document).ready(function () {
           $('select').attr("id", "newId"); //direct descendant of a
       });
</script>

これは、あらゆる目的で実行できます。本文の終了タグの前に追加するだけで、Jquery.min.jsを追加する必要はありません


0

エランの答えは良いですが、私はそれに追加します。オブジェクトにインライン化されていないインタラクティビティを監視する必要があります(つまり、onclickイベントが関数を呼び出した場合でも引き続き機能します)が、そのIDに関連付けられたjavascriptまたはjQueryイベント処理がある場合、基本的に破棄されます:

$("#myId").on("click", function() {});

IDが#myID123に変更された場合、上記の関数は私の経験から正しく機能しなくなります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.