Я хочу отримати ім'я класу за допомогою jQuery
І якщо він має ідентифікатор
<div class="myclass"></div>
this.className
працює без jquery (повернемось "myclass"
у наведеному вище прикладі)
Я хочу отримати ім'я класу за допомогою jQuery
І якщо він має ідентифікатор
<div class="myclass"></div>
this.className
працює без jquery (повернемось "myclass"
у наведеному вище прикладі)
Відповіді:
Після отримання елемента як об'єкта jQuery за допомогою інших засобів, ніж його клас, тоді
var className = $('#sidebar div:eq(14)').attr('class');
повинен зробити трюк. Для використання ідентифікатора .attr('id')
.
Якщо ви знаходитесь в обробці подій або іншому методі jQuery, де елементом є чистий вузол DOM без обгортки, ви можете використовувати:
this.className // for classes, and
this.id // for IDs
Обидва є стандартними методами DOM і добре підтримуються у всіх браузерах.
if(className.indexOf(' ') !== -1){throw new Error('Uh-oh! More than one class name!');}
.attr('class')
і комбінуєте його, if(className.indexOf('Class_I_am_Looking_For') > = 0)
ви можете легко перевірити наявність певного класу і все ще обробляти кілька класів.
if(className.indexOf('Class_I_am_Looking_For') > = 0)
також буде матчу"This_Is_Not_the_Class_I_am_Looking_For"
Краще використовувати, .hasClass()
коли ви хочете перевірити, чи є елемент певним class
. Це тому, що коли елемент має кількаclass
це не тривіально перевіряти.
Приклад:
<div id='test' class='main divhover'></div>
Де:
$('#test').attr('class'); // returns `main divhover`.
З .hasClass()
ми можемо перевірити , якщо div
є клас divhover
.
$('#test').hasClass('divhover'); // returns true
$('#test').hasClass('main'); // returns true
.is('.divhover')
Будьте обережні, можливо, у вас є клас і підклас.
<div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>
Якщо ви використовуєте попередні рішення, у вас буде:
myclass mysubclass
Отже, якщо ви хочете мати селектор класу , зробіть наступне:
var className = '.'+$('#id').attr('class').split(' ').join('.')
і у вас буде
.myclass.mysubclass
Тепер, якщо ви хочете вибрати всі елементи, що мають той самий клас, як, наприклад, div:
var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))
це означає
var brothers=$('.myclass.mysubclass')
АБО можна реалізувати за допомогою ванільного javascript у 2 рядках:
const { classList } = document.querySelector('#id');
document.querySelectorAll(`.${Array.from(classList).join('.')}`);
'.'+$('#id').attr('class').split(/[ \n\r\t\f]+/).join('.')
тому, що простір, Tab, LF, CR і FF дозволяється розділяти класи. ( .split()
також приймає RegExps.)
'.'+$('#id').attr('class').split(/\s+/).join('.')
було б більш стисло, чи не так? Або це відповідало б чомусь, про що я не думаю?
.attr('class').trim().split(...)
ви можете просто використовувати,
var className = $('#id').attr('class');
Якщо у вас <div>
є id
:
<div id="test" class="my-custom-class"></div>
...Ви можете спробувати:
var yourClass = $("#test").prop("class");
Якщо у вас <div>
є лише a class
, ви можете спробувати:
var yourClass = $(".my-custom-class").prop("class");
Якщо ви збираєтеся використовувати функцію розділення для вилучення імен класів, тоді вам доведеться компенсувати потенційні зміни форматування, які можуть призвести до несподіваних результатів. Наприклад:
" myclass1 myclass2 ".split(' ').join(".")
виробляє
".myclass1..myclass2."
Я думаю, вам краще використовувати звичайний вираз, щоб відповідати набору допустимих символів для імен класів. Наприклад:
" myclass1 myclass2 ".match(/[\d\w-_]+/g);
виробляє
["myclass1", "myclass2"]
Регулярний вираз, мабуть, не повний, але, сподіваємось, ви зрозуміли мою думку. Такий підхід зменшує можливість поганого форматування.
Щоб виконати відповідь Уайтстока (що найкраще, що я знайшов), я зробив:
className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');
Отже для "myclass1 myclass2" результатом буде ".myclass1 .myclass2"
<div id="elem" class="className"></div>
За допомогою Javascript
document.getElementById('elem').className;
З jQuery
$('#elem').attr('class');
АБО
$('#elem').get(0).className;
Якщо ви не знаєте назви класу, Але ви знаєте ідентифікатор, ви можете спробувати це:
<div id="currentST" class="myclass"></div>
Потім зателефонуйте за допомогою:
alert($('#currentST').attr('class'));
Якщо ви хочете отримати класи div, а потім хочете перевірити, чи існує якийсь клас, то просте використання.
if ( $('#div-id' ).hasClass( 'classname' ) ) {
// do something...
}
наприклад;
if ( $('body').hasClass( 'home' ) ) {
$('#menu-item-4').addClass('active');
}
Спробуй це
HTML
<div class="class_area-1">
area 1
</div>
<div class="class_area-2">
area 2
</div>
<div class="class_area-3">
area 3
</div>
jQuery
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="application/javascript">
$('div').click(function(){
alert($(this).attr('class'));
});
</script>
якщо у нас є одиночний або ми хочемо перший div
елемент, який ми можемо використовувати
$('div')[0].className
інакше нам потрібен id
елемент
Якщо у нас є код:
<div id="myDiv" class="myClass myClass2"></div>
щоб взяти ім'я класу за допомогою jQuery, ми могли б визначити і використовувати простий метод плагіна:
$.fn.class = function(){
return Array.prototype.slice.call( $(this)[0].classList );
}
або
$.fn.class = function(){
return $(this).prop('class');
}
Використання методу буде:
$('#myDiv').class();
Треба зауважити, що він поверне список класів на відміну від нативного методу element.className, який повертає лише перший клас доданих класів. Оскільки часто до цього елемента додається більше одного класу, я рекомендую не використовувати цей нативний метод, а element.classlist або описаний вище метод.
Перший варіант буде повертати список класів як масив, другий як рядок - назви класів, розділені пробілами:
// [myClass, myClass2]
// "myClass myClass2"
Ще одне важливе зауваження - це обидва методи, а також метод jQuery
$('div').prop('class');
повернути лише список класів першого елемента, спійманого об’єктом jQuery, якщо ми використовуємо більш поширений селектор, який вказує на багато інших елементів. У такому випадку ми маємо позначити елемент, ми хочемо отримати його класи, використовуючи якийсь індекс, наприклад
$('div:eq(2)').prop('class');
Це також залежить, що вам потрібно робити з цими заняттями. Якщо ви хочете просто перевірити наявність класу в списку класів елемента з цим ідентифікатором, вам слід просто скористатися методом "hasClass":
if($('#myDiv').hasClass('myClass')){
// do something
}
як зазначено в коментарях вище. Але якщо вам потрібно взяти всі класи як вибір, тоді використовуйте цей код:
$.fn.classes = function(){
var o = $(this);
return o.prop('class')? [''].concat( o.prop('class').split(' ') ).join('.') : '';
}
var mySelector = $('#myDiv').classes();
Результатом буде:
// .myClass.myClass2
і ви можете змусити його створити, наприклад, специфічне правило css для переписування, наприклад.
З повагою
Це теж працює.
const $el = $(".myclass");
const className = $el[0].className;
Найкращий спосіб отримати ім’я класу в JavaScript або jquery
attr()
функція атрибута використовується для отримання та встановлення атрибута.
Отримайте клас
jQuery('your selector').attr('class'); // Return class
Перевірити наявність класу чи ні
The hasClass() method checks if any of the selected elements have a specified class name.
if(jQuery('selector').hasClass('abc-class')){
// Yes Exist
}else{
// NOt exists
}
Установити клас
jQuery('your selector').attr('class','myclass'); // It will add class to your selector
Отримайте клас при натисканні кнопки за допомогою jQuery
jQuery(document).on('click','button',function(){
var myclass = jQuery('#selector').attr('class');
});
Додайте клас, якщо у селекторі немає жодного класу за допомогою jQuery
if ( $('#div-id' ).hasClass( 'classname' ) ) {
// Add your code
}
Отримайте другий клас на кілька класів, використовуючи елемент
Change array position in place of [1] to get particular class.
var mysecondclass = $('#mydiv').attr('class').split(' ')[1];
використовувати так: -
$(".myclass").css("color","red");
якщо ви використовували цей клас не один раз, тоді використовуйте кожного оператора
$(".myclass").each(function (index, value) {
//do you code
}
parents()
.