[SOLUCIONADO] Usar before() de JQuery

Biiiiilm · #1 (**permalink**) 04/05/2014, 12:46

Hola, tengo una duda sobre cómo usar la función before() de jquery.

Mi código es éste:

Código:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(¿¿¿???).before("Texto anterior a botón ->");
  });
});
</script>
</head>
<body>

<button>Cliquéame</button>
<br /><input name="primero" type="radio" value="1" />1. Primero
<br /><input name="segundo" type="radio" value="2" />2. Segundo

</body>
</html>

Quiero que el texto "Texto anterior a botón ->" aparezca delante de uno de los inputs, pero NO de ambos.
Es decir, no sé qué atributo tengo que poner donde he puesto los interrogantes ¿¿¿???

Si pongo 'input[type="radio"]' el texto aparece, pero delante de los dos, y yo solo quiero que aparezca delante del primero.

¿Alguna idea?

PHPeros · #2 (**permalink**) 04/05/2014, 13:21

Con el selector o método first.

Alexis88 · #3 (**permalink**) 04/05/2014, 13:21

Debes de especificar el elemento al que quieres anteponer el texto para que no se incluya en ambos. Puedes hacerlo tanto con el método before como con insertBefore.

Código Javascript:

Ver original//Con .before()
$(":radio:first-child").before("<label>Texto anterior a botón -></label>");
 
//Con .insertBefore()
$("<label>Texto anterior a botón -></label>").insertBefore(":radio:first-child");

Saludos

Biiiiilm · #4 (**permalink**) 04/05/2014, 13:38

Pongo lo que me dices y no funciona...

Código:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(":radio:first-child").before("Texto anterior a botón ->");
  });
});
</script>
</head>
<body>

<button>Cliquéame</button>
<br /><input name="primero" type="radio" value="1" />1. Primero
<br /><input name="segundo" type="radio" value="2" />2. Segundo

</body>
</html>

Lo correcto es $('input[type="radio"]:first').before("Texto anterior a botón ->");

Por cierto, ¿cómo haríais para que fuese delante del segundo? En lugar del primero. Entiendo que podría usarse "last", pero... ¿Hay alguna manera de usar "second"? xD O similar...

Me vuelvo a contestar. Se usa :eq(0) ó :eq(1) para seleccionar el primero o el segundo, respectivamente ;)

Muchísimas gracias, Alexis88

Alexis88 · #5 (**permalink**) 04/05/2014, 14:03

Es extraño que no te funcione correctamente:

El selector :radio, es equivalente a input[type="radio"]: https://api.jquery.com/radio-selector/