Получить список классов для элемента с помощью jQuery
есть ли способ в jQuery выполнить цикл или назначить массиву все классы, назначенные элементу?
ex.
<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
Я буду искать" специальный "класс, как в" dolor_spec " выше. Я знаю, что могу использовать hasClass (), но фактическое имя класса может быть не обязательно известно в то время.
17 ответов
можно использовать document.getElementById('divId').className.split(/\s+/);
чтобы получить массив имен классов.
затем вы можете перебрать и найти тот, который вы хотите.
var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i] === 'someClass') {
//do something
}
}
jQuery на самом деле не помочь вам здесь...
var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
if (item === 'someClass') {
//do something
}
});
вот плагин jQuery, который вернет массив всех классов, которые соответствуют элементам
;!(function ($) {
$.fn.classes = function (callback) {
var classes = [];
$.each(this, function (i, v) {
var splitClassName = v.className.split(/\s+/);
for (var j = 0; j < splitClassName.length; j++) {
var className = splitClassName[j];
if (-1 === classes.indexOf(className)) {
classes.push(className);
}
}
});
if ('function' === typeof callback) {
for (var i in classes) {
callback(classes[i]);
}
}
return classes;
};
})(jQuery);
использовать его как
$('div').classes();
в вашем случае возвращается
["Lorem", "ipsum", "dolor_spec", "sit", "amet"]
вы также можете передать функцию методу, который будет вызываться для каждого класса
$('div').classes(
function(c) {
// do something with each class
}
);
здесь это jsFiddle я создал для демонстрации и тестирования http://jsfiddle.net/GD8Qn/8/
Уменьшенный Javascript
;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);
в поддерживаемых браузерах вы можете использовать элементы DOM' classList
собственность.
$(element)[0].classList
это массив-подобный объект, перечисляющий все классы, которые имеет элемент.
Если вам нужно поддерживать старые версии браузеров, которые не поддерживают classList
свойство, связанная страница MDN также включает в себя прокладку для него - хотя даже прокладка не будет работать в версиях Internet Explorer ниже IE 8.
вы должны попробовать это:
$("selector").prop("classList")
возвращает массив всех текущих классов элемента.
var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){
//do something
});
обновление:
Как правильно указал @Ryan Leonard, мой ответ на самом деле не фиксирует точку, которую я сделал сам... Вам нужно как обрезать и удалить двойные пробелы (например) строку.заменить(/ +/г, " ").. Или вы можете разделить el.className, а затем удалить пустые значения с (например) arr.фильтр(логический).
const classes = element.className.split(' ').filter(Boolean);
или более современные
const classes = element.classList;
старый:
со всеми данными ответами, вы должны никогда не забывайте пользователя .отделка() (или $.trim ())
поскольку классы добавляются и удаляются, может случиться, что между строками классов существует несколько пробелов.. например, "class1 class2 class3"..
это превратится в ['class1', 'class2',",",",", "class3']..
когда вы используете trim, все несколько пробелы удаляются..
может это вам тоже поможет. Я использовал эту функцию для получения классов элемента childern..
function getClickClicked(){
var clickedElement=null;
var classes = null;<--- this is array
ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
clickedElement = $(e.target);
classes = clickedElement.attr("class").split(" ");
for(var i = 0; i<classes.length;i++){
console.log(classes[i]);
}
e.preventDefault();
});
}
в вашем случае вы хотите, чтобы класс doler_ipsum u мог сделать это сейчас calsses[2];
.
Попробуйте Это. Это даст вам имена всех классов из всех элементов документа.
$(document).ready(function() {
var currentHtml="";
$('*').each(function() {
if ($(this).hasClass('') === false) {
var class_name = $(this).attr('class');
if (class_name.match(/\s/g)){
var newClasses= class_name.split(' ');
for (var i = 0; i <= newClasses.length - 1; i++) {
if (currentHtml.indexOf(newClasses[i]) <0) {
currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
}
}
}
else
{
if (currentHtml.indexOf(class_name) <0) {
currentHtml += "."+class_name+"<br>{<br><br>}<br>"
}
}
}
else
{
console.log("none");
}
});
$("#Test").html(currentHtml);
});
вот рабочий пример:https://jsfiddle.net/raju_sumit/2xu1ujoy/3/
Спасибо за это - у меня была аналогичная проблема, так как я пытаюсь программно связать объекты с иерархическими именами классов, хотя эти имена могут не обязательно быть известны моему скрипту.
в моем сценарии я хочу <a>
тег для включения/выключения текста справки, указав <a>
tag [some_class]
плюс класс toggle
, а затем давая ему текст справки класса [some_class]_toggle
. Этот код успешно находит связанные элементы с помощью jQuery:
$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});
function toggleHelp(obj, mode){
var classList = obj.attr('class').split(/\s+/);
$.each( classList, function(index, item){
if (item.indexOf("_toggle") > 0) {
var targetClass = "." + item.replace("_toggle", "");
if(mode===false){$(targetClass).removeClass("off");}
else{$(targetClass).addClass("off");}
}
});
}
javascript предоставляет атрибут classList для элемента узла в dom. Просто используя
element.classList
вернет объект формы
DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}
объект имеет такие функции, как contains, add, remove которые вы можете использовать
у меня была аналогичная проблема, для элемента типа "изображение". Мне нужно было проверить, принадлежит ли элемент к определенному классу. Сначала я попробовал с:
$('<img>').hasClass("nameOfMyClass");
но у меня есть хорошая "эта функция недоступна для этого элемента".
затем я проверил свой элемент в DOM explorer, и я увидел очень хороший атрибут, который я мог бы использовать: className. Он содержал имена всех классов моего элемента, разделенных пробелами.
$('img').className // it contains "class1 class2 class3"
как только вы получите эту, просто раздели веревку, как обычно.
В моем случае это сработало:
var listOfClassesOfMyElement= $('img').className.split(" ");
Я предполагаю, что это будет работать с другими видами элементов (кроме Гуи).
надеюсь, что это помогает.
немного поздно, но использование функции extend() позволяет вызывать "hasClass ()" для любого элемента, например:
var hasClass = $('#divId').hasClass('someClass');
(function($) {
$.extend({
hasClass: new function(className) {
var classAttr = $J(this).attr('class');
if (classAttr != null && classAttr != undefined) {
var classList = classAttr.split(/\s+/);
for(var ix = 0, len = classList.length;ix < len;ix++) {
if (className === classList[ix]) {
return true;
}
}
}
return false;
}
}); })(jQuery);
вопрос в том, для чего предназначен Jquery.
$('.dolor_spec').each(function(){ //do stuff
а почему никто не дал .find () как ответ?
$('div').find('.dolor_spec').each(function(){
..
});
существует также classList для браузеров, отличных от IE:
if element.classList.contains("dolor_spec") { //do stuff
вот вы идете, просто подправили readsquareответ, чтобы вернуть массив всех классов:
function classList(elem){
var classList = elem.attr('class').split(/\s+/);
var classes = new Array(classList.length);
$.each( classList, function(index, item){
classes[index] = item;
});
return classes;
}
передайте элемент jQuery функции, чтобы пример вызова был:
var myClasses = classList($('#myElement'));
Я знаю, это старый вопрос, но все же.
<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
var className=".dolor_spec" //dynamic
если вы хотите управлять элементом
$("#specId"+className).addClass('whatever');
если вы хотите проверить, имеет ли элемент class
$("#specId"+className).length>0
если несколько классов
//if you want to select ONE of the classes
var classNames = ['.dolor_spec','.test','.test2']
$("#specId"+classNames).addClass('whatever');
$("#specId"+classNames).length>0
//if you want to select all of the classes
var result = {className: ""};
classNames.forEach(function(el){this.className+=el;},result);
var searchedElement= $("#specId"+result.className);
searchedElement.addClass('whatever');
searchedElement.length>0