javascript - obtener - jquery children

Obtener la lista de clases para el elemento con jQuery

Question

¿Hay alguna forma en jQuery de recorrer o asignar a una matriz todas las clases asignadas a un elemento?

ex.

<div class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

Buscaré una clase "especial" como en "dolor_spec" arriba. Sé que podría usar hasClass () pero el nombre real de la clase puede no ser necesariamente conocido en ese momento.

Answer 1

¿Por qué nadie ha enumerado simplemente?

$(element).attr("class").split('' '');

Answer 2

Aquí hay un complemento de jQuery que devolverá una matriz de todas las clases que tienen los elementos coincidentes

;!(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);

Utilízalo como

$(''div'').classes();

En su caso devuelve.

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

También puede pasar una función al método que se llamará en cada clase.

$(''div'').classes(
function(c) {
// do something with each class
}
);

Aquí hay un jsFiddle que configuré para demostrar y probar http://jsfiddle.net/GD8Qn/8/

Javascript minificado

;!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);

Answer 3

Aquí tienes, simplemente ajusté la respuesta de readsquare para devolver una matriz de todas las clases:

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;
}

Pase un elemento jQuery a la función, de modo que una llamada de muestra sea:

var myClasses = classList($(''#myElement''));

Answer 4

Deberías probar este:

$("selector").prop("classList")

Devuelve una matriz de todas las clases actuales del elemento.

Answer 5

En los navegadores compatibles, puede utilizar la propiedad classList los elementos DOM.

$(element)[0].classList

Es un objeto similar a una matriz que enumera todas las clases que tiene el elemento.

Si necesita admitir versiones anteriores del navegador que no son compatibles con la propiedad classList , la página MDN vinculada también incluye un complemento para ello, aunque incluso el complemento no funcionará en versiones de Internet Explorer por debajo de IE 8.

Answer 6

Gracias por esto: estaba teniendo un problema similar, ya que estoy tratando de relacionar programáticamente los objetos con nombres de clase jerárquicos, aunque esos nombres no necesariamente sean conocidos por mi script.

En mi secuencia de comandos, quiero que una etiqueta <a> active / desactive el texto de ayuda al dar la etiqueta <a> [some_class] más la clase de toggle , y luego darle el texto de ayuda a la clase de [some_class]_toggle . Este código está encontrando exitosamente los elementos relacionados usando 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");}
}
});
}

Answer 7

La pregunta es para qué está diseñado Jquery.

$(''.dolor_spec'').each(function(){ //do stuff

¿Y por qué nadie ha dado .find() como respuesta?

$(''div'').find(''.dolor_spec'').each(function(){
..
});

También hay classList para los navegadores que no son de IE:

if element.classList.contains("dolor_spec") { //do stuff

Answer 8

Prueba esto. Esto te dará los nombres de todas las clases de todos los elementos del documento.

$(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);

});

Aquí está el ejemplo de trabajo: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Answer 9

Puede ser que esto te pueda ayudar también. He usado esta función para obtener clases de elemento 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();
});
}

En su caso, desea que la clase doler_ipsum u pueda hacer así ahora calsses[2]; .

Answer 10

Puede usar document.getElementById(''divId'').className.split(//s+/); para obtener una serie de nombres de clase.

Luego podrás iterar y encontrar el que quieras.

var classList = document.getElementById(''divId'').className.split(//s+/);
for (var i = 0; i < classList.length; i++) {
if (classList[i] === ''someClass'') {
//do something
}
}

jQuery realmente no te ayuda aquí ...

var classList = $(''#divId'').attr(''class'').split(//s+/);
$.each(classList, function(index, item) {
if (item === ''someClass'') {
//do something
}
});

Answer 11

Sé que esta es una vieja pregunta pero aún así.

<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>
var className=".dolor_spec" //dynamic

Si quieres manipular el elemento.

$("#specId"+className).addClass(''whatever'');

Si quieres comprobar si el elemento tiene clase.

 $("#specId"+className).length>0

si multiples clases

//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

Answer 12

Tuve un problema similar, para un elemento de tipo de imagen. Necesitaba verificar si el elemento era de cierta clase. Primero probé con:

$(''<img>'').hasClass("nameOfMyClass");

pero tengo un buen "esta función no está disponible para este elemento".

Luego inspeccioné mi elemento en el explorador de DOM y vi un atributo muy bueno que podía usar: className. Contenía los nombres de todas las clases de mi elemento separadas por espacios en blanco.

$(''img'').className // it contains "class1 class2 class3"

Una vez que obtenga esto, simplemente divida la cuerda como de costumbre.

En mi caso esto funcionó:

var listOfClassesOfMyElement= $(''img'').className.split(" ");

Supongo que esto funcionaría con otros tipos de elementos (además de img).

Espero eso ayude.

Answer 13

Un poco tarde, pero usando la función extend () le permite llamar "hasClass ()" en cualquier elemento, por ejemplo:
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);

Answer 14

javascript proporciona un atributo classList para un elemento de nodo en dom. Simplemente usando

 element.classList

devolverá un objeto de forma

 DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}

El objeto tiene funciones como el que contiene, agrega, elimina, que puede usar

Answer 15

Actualizar:

Como @Ryan Leonard señaló correctamente, mi respuesta realmente no corrige el punto que me hice yo ... Es necesario recortar y eliminar espacios dobles con (por ejemplo) string.replace (/ + / g, "") .. O podría dividir el.className y luego eliminar los valores vacíos con (por ejemplo) arr.filter (booleano).

const classes = element.className.split('' '').filter(Boolean);

o mas moderno

const classes = element.classList;

Antiguo:

Con todas las respuestas dadas, nunca debe olvidar al usuario .trim () (o $ .trim ())

Debido a que las clases se agregan y eliminan, puede suceder que haya múltiples espacios entre las cadenas de clase ... por ejemplo, ''clase1 clase2 clase3''

Esto se convertiría en [''class1'', ''class2'', '''', '''', '''', ''class3''] ..

Cuando usas recortar, todos los espacios múltiples se eliminan

Answer 16

$(''div'').attr(''class'').split('' '').map(function(cls){ console.log(cls);})

Answer 17

var classList = $(element).attr(''class'').split(//s+/);
$(classList).each(function(index){
//do something
});