Я хочу получить имя класса с помощью 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>
есть только один class
, вы можете попробовать:
var yourClass = $(".my-custom-class").prop("class");
Если вы собираетесь использовать функцию split для извлечения имен классов, вам придется компенсировать возможные вариации форматирования, которые могут привести к неожиданным результатам. Например:
" myclass1 myclass2 ".split(' ').join(".")
производит
".myclass1..myclass2."
Я думаю, что вам лучше использовать регулярное выражение для сопоставления с набором допустимых символов для имен классов. Например:
" myclass1 myclass2 ".match(/[\d\w-_]+/g);
производит
["myclass1", "myclass2"]
Регулярное выражение, вероятно, не завершено, но, надеюсь, вы понимаете мою точку зрения. Такой подход снижает вероятность плохого форматирования.
Чтобы завершить ответ Whitestock (который я нашел лучше всего), я сделал:
className = $(this).attr('class').match(/[\d\w-_]+/g);
className = '.' + className.join(' .');
Таким образом, для «myclass1 myclass2» результат будет «.myclass1 .myclass2»
Вы можете получить имя класса двумя способами:
var className = $('.myclass').attr('class');
ИЛИ
var className = $('.myclass').prop('class');
<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()
.