Як я можу отримати поточний клас div за допомогою jQuery?

77

Як я можу отримати поточний клас div, використовуючи jQuery div1?

jquery

— Шию
джерело

119

Просто отримайте атрибут class:

var div1Class = $('#div1').attr('class');

Приклад

<div id="div1" class="accordion accordion_active">

Щоб перевірити наведений вище div для класів, що містяться в ньому

var a = ("#div1").attr('class'); 
console.log(a);

вихід консолі

accordion accordion_active

— Крістіан Сальвадо
джерело

це насправді атрибут? className..? classNameВикористовується не лише для JavaScript? document.getElementById("div1").className

— peirix

2

Побачив зараз, що згідно з документом jQuery пропонується використовувати, classNameщоб це не заважало зарезервованому слову classв javascript ...

— peirix

2

ПРИМІТКА. У jQuery 1.6 вони нарешті виправили attrметод, і тепер ви повинні використовувати його $(...).attr('class');, classNameце просто властивість доступу, яка відображає classатрибут елемента DOM - classNameатрибут відсутній , це просто властивість-.

— Крістіан Сальвадо,

18

Просто

var divClass = $("#div1").attr("class")

Ви можете зробити деякі інші речі, щоб маніпулювати класом елемента

$("#div1").addClass("foo"); // add class 'foo' to div1
$("#div1").removeClass("foo"); // remove class 'foo' from div1
$("#div1").toggleClass("foo"); // toggle class 'foo'

— Якуб Арнольд
джерело

13

$('#div1').attr('class')

поверне рядок класів. Перетворіть його в масив назв класів

var classNames = $('#div1').attr('class').split(' ');

— Рус Кам
джерело

3

Поставив +1 ($ ('# div1'). attr ('class') || '') .split ('') безпечніше imo.

— user420667

10

Відтепер краще використовувати функцію .prop () замість функції .attr ().

Ось документація jQuery:

Починаючи з jQuery 1.6, метод .attr () повертає невизначений для атрибутів, які не були встановлені. Крім того, .attr () не слід використовувати на звичайних об'єктах, масивах, вікні чи документі. Щоб отримати та змінити властивості DOM, використовуйте метод .prop ().

var div1Class = $('#div1').prop('class');

— mt81
джерело

він знову змінився з 2.2: станом на jQuery 1.12 / 2.2, замість нього використовується [...] атрибут class. Отже, .removeClass () можна використовувати в документах XML або SVG. (джерело: api.jquery.com/removeClass )

— Сандра

2

$("#div1").attr("class")

— Tzury Bar Yochay
джерело

1

var classname=$('#div1').attr('class')

— ореол
джерело

1

var className=$('selector').attr('class');

або

var className=$(this).attr('class');

ім'я класу поточного елемента

— аймен
джерело

1

Метод addClass у jQuery має currentClassвбудовану властивість. Ви можете використовувати його всередині виклику функції. Подобається так:

<div>First div</div>
<div class="red">Second div</div>
<div>Third div</div>
<div>Fourth div</div>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
    if ( currentClass === "red" ) {
      addedClass = "green"; }
    return addedClass;
  });
</script>

— Штефан Грюнвальд
джерело

0

спробуйте це

$ ("# div1"). attr ("клас")

— Раві
джерело

0

<div  id="my_id" class="my_class"></div>

якщо це перший div, тоді звертайтеся до нього так:

document.write("div CSS class: " + document.getElementsByTagName('div')[0].className);

або ж зробити це:

document.write("alternative way: " + document.getElementById('my_id').className);

Це дає такі результати:

div CSS class: my_class
alternative way: my_class

— Штефан Грюнвальд
джерело

0

якщо ви хочете шукати div, який має більше 1 класу, спробуйте це:

HTML:

<div class="class1 class2 class3" id="myDiv">

Jquery:

var check = $( "#myDiv" ).hasClass( "class2" ).toString();

витік:

true

— Бадіпармагі
джерело