[SOLUCIONADO] Selectores y Class

chichote · #1 (**permalink**) 12/02/2014, 09:54

hola amigos de FDW.

Tengo una inquietud que no puedo resolver.

Resulta que necesito rescatar un class especifico que no se que class es XD, suena enredado pero no lo es tanto, pongo un par de ejemplos para explicarlo mejor.

Código:

1) <h1 class="pre-algo">Lorem Ipsum</h1>
2) <h2 class="pre-otro-algo">Lorem Ipsum</h2>
3) <h3 class="color pre-otro-algo mas-class">Lorem Ipsum</h3>

El único dato que tengo es que los class que necesito comienzan con el prefijo pre-. lo que viene despues del guion (-) puede ser cualquier cosa.

Puedo recorrer los distintos elementos que contengan un class que comience con dicho prefijo

Código:

jQuery("[class^='pre']").each(function(n) {
	console.log(jQuery(this).html());
});

Mi problema es que necesito almacenar en una variable el class completo que comience con dicho prefijo. Por ejemplo en el caso 3 tengo tres class (color, pre-otro-algo y mas-class), y necesito almacenar en una variable solo el class "pre-otro-algo"

PHPeros · #2 (**permalink**) 12/02/2014, 09:59

Con className.

chichote · #3 (**permalink**) 12/02/2014, 10:07

Cita:

Iniciado por PHPeros

Con className.

hasta donde yo se className no existe en jquery.

saludos y gracias

PHPeros · #4 (**permalink**) 12/02/2014, 10:09

Pues con: .attr("class")

className sigue estando presente, aunque no en el objeto jQuery.

chichote · #5 (**permalink**) 12/02/2014, 10:12

Cita:

Iniciado por PHPeros

Pues con: .attr("class")

claro, pero sigo con el mismo problema, con attr class me entrega todas las class del elemento, necesito solo una de ellas. Y adicional a eso debe entregarme la que comience con el prefijo "pre".

Saludos y gracias.

jonni09lo · #6 (**permalink**) 12/02/2014, 10:17

Pues puedes hacer algo como esto:

Código Javascript:

Ver originalvar clases = $(this).attr('class'),
    clase;
 
clases = clases.slplit(' ');
 
$.each(clases, function(k, v){
    if( v.indexOf('pre') != -1 ){
        clase = v;
        return;
    }
});
 
alert(clase);

Saludos

chichote · #7 (**permalink**) 12/02/2014, 10:20

Cita:

Iniciado por jonni09lo

Pues puedes hacer algo como esto:

Código Javascript:

Ver originalvar clases = $(this).attr('class'),
    clase;
 
clases = clases.slplit(' ');
 
$.each(clases, function(k, v){
    if( v.indexOf('pre') ){
        clase = v;
        return;
    }
});
 
alert(clase);

Saludos

Buena jonni09lo, vamos a jugar un rato, saludos y gracias.

PHPeros · #8 (**permalink**) 12/02/2014, 10:20

Eh! No vale!

@jonni09lo: indexOf retorna -1 si no se encuentra, no false como el strpos de PHP!

if(-1)
// Esto se ejecuta siempre.

rottenp4nx · #9 (**permalink**) 12/02/2014, 10:45

Échale un vistazo, ahí tienes que modificarlo a tus necesidades si te sirve :B

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script>
$(document).on("ready",function(){
    $("[class^='pre']").on("click",function(){
        $(this).css("background-color","#CCC");
        $("#hola").append($(this).attr("class") + '<br/>');
    });
});
</script>
</head>
 
<body>
<h1 class="pre-algo">Lorem Ipsum</h1>
<h2 class="pre-otro-algo">Lorem Ipsum</h2>
<h3 class="color pre-otro-algo mas-class">Lorem Ipsum</h3>
<div id="hola"></div>
</body>
</html>

chichote · #10 (**permalink**) 12/02/2014, 13:48

Cita:

Iniciado por PHPeros

Eh! No vale!

@jonni09lo: indexOf retorna -1 si no se encuentra, no false como el strpos de PHP!

if(-1)
// Esto se ejecuta siempre.

de hecho aplique if( v.indexOf("pre") == 0 )

saludos.

chichote · #11 (**permalink**) 12/02/2014, 13:49

Cita:

Iniciado por rottenp4nx

Échale un vistazo, ahí tienes que modificarlo a tus necesidades si te sirve :B

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script>
$(document).on("ready",function(){
    $("[class^='pre']").on("click",function(){
        $(this).css("background-color","#CCC");
        $("#hola").append($(this).attr("class") + '<br/>');
    });
});
</script>
</head>
 
<body>
<h1 class="pre-algo">Lorem Ipsum</h1>
<h2 class="pre-otro-algo">Lorem Ipsum</h2>
<h3 class="color pre-otro-algo mas-class">Lorem Ipsum</h3>
<div id="hola"></div>
</body>
</html>

gracias rottenp4nx