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

— 광대
소스

유효한 XHTML이 되려면 ID가 고유해야합니다. ID는 더 엄격한 규칙 (예 : 공백 없음, 문자 또는 _로 시작)과 일치해야하며 문자, 숫자 또는 제한된 수의 기타 문자 만 포함해야합니다.

— Doug Domeny

7

@Peter : wikipedia에 링크를 추가하는 것은 약간 중복되는 것 같습니다.

— 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());
    });
});

따라서 세 요소의 ID를 변경 / 덮어 쓰고 하나의 요소에 ID를 추가합니다. 필요에 따라 수정할 수 있습니다.

— Sarfraz
소스

1

캐싱은 어떻습니까? 4 개의 다른 jQuery 객체를 "this"로 만드는 대신. var text = $ (this) .text ();

— PetersenDidIt

@petersendidt : 동의했습니다. 제 대답에서 그가 필요에 따라 수정해야한다고 말했습니다.

— Sarfraz

더 나은 : $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());...하지 여기에 ID를 사용하는 것은 좋은 아이디어입니다.

— nickf

이것은 한 번만 작동하며 그 후에 ID가 변경됩니다. 또한 동일한 ID를 계속 재정의하므로 $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(또는 last, for .stretch_footer)에 대해 수행하는 것이 좋습니다. 어쨌든 이상합니다.

— Kobi

26

이것은 요소에 이미있는 모든 ID를 덮어 씁니다.

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

addClass존재 하는 이유 는 요소가 여러 클래스를 가질 수 있으므로 이미 설정된 클래스를 반드시 덮어 쓰고 싶지 않기 때문입니다. 그러나 대부분의 속성에는 주어진 시간에 하나의 값만 허용됩니다.

— 안토니
소스

11

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

— 야옹
소스

3

대체하지 않고 'ID에 추가'하려는 경우

먼저 현재 ID를 캡처 한 다음 새 ID를 추가하십시오. 양식에 입력 상태를 사용하는 트위터 부트 스트랩에 특히 유용합니다.

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

그렇지 않으면 이전에 설정 한 속성이 손실됩니다.

hth,

— geekbuntu
소스

유효한 요소는 하나의 ID 만 가질 수 있습니다. stackoverflow.com/questions/192048/…

— colonelclick

3

나는 coffeescript에서 이것을하고있다.

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

— 니콜라이
소스