jQuery-クラスの代わりにIDを追加する

94

私は現在のjQueryを使用しています：

$(function() {
    $('span .breadcrumb').each(function(){
        $('#nav').addClass($(this).text());
        $('#container').addClass($(this).text());
        $('.stretch_footer').addClass($(this).text())
        $('#footer').addClass($(this).text());
    });
});

ブレッドクラムに保持されているテキストをページの4つの要素に適用し、そのページのスタイルを具体的に指定できるようにします。

クラスではなくIDを追加したいのですが、どうすれば実現できますか？

jquery

— CLiown
ソース

IDは、有効なXHTMLであるために一意である必要があります。IDはより厳密な規則に一致する必要があります。たとえば、スペースなし、文字または_で始まり、文字、数字、または限られた数の他の文字のみを含む必要があります。

— Doug Domeny 2010

7

@ピーター：ウィキペディアへのリンクを追加することは少し冗長に思えます。

— nickf

jQueryでの属性

— Makyen

jQueryのaddID

— Lazerbeak12345

223

これを試して：

$('element').attr('id', 'value');

だからそれはなる;

$(function() {
    $('span .breadcrumb').each(function(){
        $('#nav').attr('id', $(this).text());
        $('#container').attr('id', $(this).text());
        $('.stretch_footer').attr('id', $(this).text())
        $('#footer').attr('id', $(this).text());
    });
});

したがって、3つの要素のIDを変更または上書きし、1つの要素にIDを追加します。必要に応じて変更できます...

— サルフラズ
ソース

1

キャッシングはどうですか？「this」の4つの異なるjQueryオブジェクトを作成するのではなく。var text = $（this）.text（）;

— PetersenDidIt

@petersendidt：私は私の答えで、彼は必要に応じて修正する必要があると同意しました。

— Sarfraz、2010

さらに良い：$('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());..ここではIDを使用しないことをお勧めします。

— nickf

これは1回だけ機能し、その後IDが変更されます...また、同じIDを上書きし続けるため、for $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())（またはlast、for .stretch_footer）を使用することもできます。とにかく、これは奇妙です。

— コビ

26

これにより、要素がすでに持っているIDが上書きされることに注意してください。

 $(".element").attr("id","SomeID");

addClass存在する理由は、要素が複数のクラスを持つことができるため、すでに設定されているクラスを必ずしも上書きする必要がないためです。ただし、ほとんどの属性では、常に許可される値は1つだけです。

— アンソニー
ソース

11

$('selector').attr( 'id', 'yourId' );

— うわぁ
ソース

3

置き換えるのではなく、「IDに追加する」場合

最初に現在のIDをキャプチャしてから、新しいIDを追加します。フォームの入力状態を使用するTwitterブートストラップに特に役立ちます。

    new_id = '{{old_id}} inputSuccess';
    old_id = that.attr('id');
    that.attr('id', new_id.replace( /{{old_id}}/ig,old_id));

そうしないと、以前に設定したプロパティが失われます。

hth、

— revs geekbuntu
ソース

有効な要素は1つのIDのみを持つことができます。stackoverflow.com/questions/192048/...

— colonelclick

3

私はコーヒースクリプトでこれをやっています

booking_module_time_clock_convert_id = () ->
  if $('.booking_module_time_clock').length
    idnumber = 1
    for a in $('.booking_module_time_clock')
      elementID = $(a).attr("id")
      $(a).attr( 'id', "#{elementID}_#{idnumber}" )
      idnumber++

— ニコライ
ソース