jquery 변경 클래스 이름

336

td 태그의 ID가 주어지면 td 태그의 클래스를 변경하고 싶습니다.

<td id="td_id" class="change_me"> ...

다른 dom 객체의 click 이벤트 내부 에서이 작업을 수행 할 수 있기를 원합니다. td의 ID를 가져 와서 클래스를 변경하려면 어떻게합니까?

jquery css

— aeq
소스

704

당신은 할 수 설정 (관계없이 어떤 클래스 였다을 사용하여) .attr()과 같이 :

$("#td_id").attr('class', 'newClass');

클래스 를 추가 하려면 .addclass()다음과 같이 대신 사용 하십시오.

$("#td_id").addClass('newClass');

또는 다음을 사용하여 클래스를 바꾸는 짧은 방법 .toggleClass():

$("#td_id").toggleClass('change_me newClass');

다음은 class속성에 대한 jQuery 메소드의 전체 목록입니다 .

— 닉 크레이 버
소스

@Nick, 첫 td parent [ var $td = $(this).parents('td:first')]를 찾은 다음 id [ var id = $td.attr('id');]와 class [var class = $td.attr('class'); 그가 그것을 트리거 TD 내부 클릭 요소를 원하기 때문에]

— 밥 Fincheimer

@ 밥-나는 따르지 않는다, 당신은 다른 질문에서 그것을 어디서 얻습니까? 이것은 요소의 ID를 가지고 있다고 말합니다 :) 또한 부모 .closest('td')대신에 대신 사용할 수 있습니다 .parents('td:first'):)

— Nick Craver

1

그의 마지막 문장 :

I want to be able to do this while inside the click event of some other dom object. How do I grab the td's id and change its class?

-아마 내가 잘못 읽고, 아마도 그는 클래스의 ID를 사용하여 클래스를 변경하는 것을 의미합니다 ...

— Bob Fincheimer

1

@Bob-맞아요 ... 다른 DOM 객체 는 객체가 문제 안에 있다고 가정 하고 있습니다 <td>:)

— Nick Craver

점을 유의 change_me부분은 당신이 사용하는 경우 선택 사항입니다toggleClass()

— sakisk

93

나는 당신이 이것을 찾고 있다고 생각합니다 :

$('#td_id').removeClass('change_me').addClass('new_class');

— 포스코
소스

32

클래스 이름을 바꾸고 싶다고 생각합니다.

이와 같은 것이 효과가 있습니다.

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

에서 http://monstertut.com/2012/06/use-jquery-to-change-css-class/

— 잭
소스

그러나 그는 다른 dom 객체의 click 이벤트 내에서 그것을하기를 원했습니다

— keyser

9

당신은 이것을 할 수 있습니다 : $("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class'); 또는 당신은 이것을 할 수 있습니다

$("#td_id").removeClass('Old_class').addClass('New_class');

— 알리레자 마 살리
소스

6

addClass 또는 toggleClass를 확인할 수 있습니다

— 칼 요한
소스

6

클릭하면 변경됩니다. 전체 프로세스를 진행하겠습니다. "외부 DOM 객체"가 select와 같은 입력이라고 가정합니다.

이 HTML부터 시작하겠습니다 :

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

매우 기본적인 CSS :

#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

그리고 jQuery 이벤트를 설정하십시오.

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

이제 선택에서 무언가를 선택할 때마다 일치하는 텍스트가있는 셀을 자동으로 찾아 전체 ID 기반 프로세스를 파괴 할 수 있습니다. 물론 그렇게하고 싶다면 값을 사용하지 않고 ID를 사용하도록 스크립트를 쉽게 수정할 수 있습니다.

.filter("#"+useVal)

ID를 적절하게 추가하십시오. 도움이 되었기를 바랍니다!

— 트라 팔마 도리아
소스

4

편집하다:

중첩 요소 에서 변경한다고 말하면 ID가 전혀 필요하지 않습니다. 대신이 작업을 수행 할 수 있습니다.

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

원래 답변 :

$('#td_id').removeClass('change_me').addClass('some_other_class');

다른 옵션은 다음과 같습니다.

$('#td_id').toggleClass('change_me some_other_class');

— 사용자
소스

나는 OP가 내부에 있다고 생각하지는 않지만 <td>주의 깊게 다시 읽으십시오 :)

— Nick Craver

@Nick-예, 업데이트를 다시 읽고 OP가 "td의 ID를 가져 와서 변경하는 방법 ..." 을 묻는 것을 보았으므로 업데이트를 추가했습니다 . 이로 인해 OP에는 ID를 처리 할 수 없다고 생각하여 원래 답변이별로 도움이되지 않습니다. 이것을 감안할 때 핸들러가있는 요소가 중첩되어 있다고 가정합니다. 그러나 확실히 가정입니다.

— user113716

2

클래스가 이미 있고 클래스를 추가하는 대신 클래스를 번갈아 사용해야하는 경우 토글 이벤트를 연결할 수 있습니다.

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});

— lentyai
소스

2

$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});

— 프라 부
소스

1

이 방법은 저에게 잘 작동합니다

$('#td_id').attr('class','new class');

— Puterafx Fx
소스

그것에 대해 몇 가지 세부 사항을 작성하십시오.

— 항공기

0

jquery를 사용하여 클래스 변경

이 시도

$('#selector_id').attr('class','new class');

이 쿼리를 사용하여 속성을 설정할 수도 있습니다

$('#selector_id').attr('Attribute Name','Attribute Value');

— 쿠마르 사랑
소스

-1

.prop를 사용하여 className을 변경하는 것이 더 좋으며 완벽하게 작동했습니다.

$(#td_id).prop('className','newClass');

이 코드 줄을 위해 다음 예제에서 newClass의 이름과 물론 요소의 id를 변경하면됩니다. idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

그건 그렇고, 어떤 요소에 어떤 스타일이 적용되는지 검색하려면 페이지가 표시되면 브라우저에서 F12를 클릭 한 다음 보려는 요소 인 DOM 탐색기 탭에서 선택하십시오. 스타일에서 요소에 적용되는 스타일과 해당 클래스의 판독 값을 확인할 수 있습니다.

— 알렉시스 가산
소스