Mover una ID al siguiente elemento usando jQuery

Me gustaría mover una ID que está en un elemento al siguiente elemento de selección en la página. Tengo que hacer esto porque el software que se usa para escribir los cuadros de selección no permite que las clases o los identificadores se apliquen directamente a los elementos seleccionados. También quiero que esté automatizado para que si tengo 20 cuadros de selección, no tenga 20 líneas separadas de jQuery.

Aquí está el código actual:

<div id="stack" class="moveID">
    <select name="overflow">
        <option value="hi">Hi</option>
    </select>
</div>

Esto es lo que me gustaría que sucediera.

<div class="moveID">
    <select name="overflow" id="stack">
        <option value="hi">Hi</option>
    </select>
</div>

preguntado el 01 de febrero de 12 a las 22:02

Lo que está describiendo no es el elemento "siguiente" (que sugiere el próximo hermano) sino el elemento secundario inmediato. Probablemente te refieres al hijo inmediato o al próximo hermano en el mismo nivel. Estoy en lo cierto? -

5 Respuestas

Como solicitó, para automatizar esto para todos los elementos con la clase moveID, podrías usar esto:

$('.moveID').each(function() {
    var id = this.id;
    $(this).removeAttr('id').children().first().attr('id', id);
});

Respondido 02 Feb 12, 02:02

+1 usando removeAttr y continuar el encadenamiento es la forma más elegante. - Ates Goral

@AtesGoral pero no tan eficiente como usar métodos DOM - a veces jQuery hace que la gente olvide lo fácil que puede ser ... - Alnitak

Y necesitamos una solución innerHTML + RegExp para demostrar el extremo lejano. - Ates Goral

Respuesta perfecta. Esto lo resolvió. Muchas gracias por tu tiempo. - Ryan Ahlfors

Suponiendo que cada elemento de selección tiene un ajuste .moveID (directo):

$("select").each(function () {

    // or this.id = $(this).closest(".moveID")[0].id;
    this.id = $(this).parent()[0].id;
    $(this).parent().removeAttr("id");
});

Respondido 02 Feb 12, 02:02

$.each($('.moveID'), function(){
  var moveTo = $(this + ':first-child');
  $(moveTo).attr('id', $(this).attr('id'));
  $(this).removeAttr('id');
})

Respondido 02 Feb 12, 02:02

Esto supone que todos los elementos de entrada tendrán el nombre "desbordamiento" - Ates Goral

Última edición, luego salgo. Esto se está inundando demasiado. Todo el mundo está corriendo para obtener la respuesta sin pensarlo primero. Yo mismo incluido - Kyle Macey

var id= $(".moveID").attr("id");
$(".moveID").removeAttr("id").find("select").attr("id",id);

Por supuesto, esto agregaría la misma ID a la mayor cantidad de selecciones que haya, lo cual es malo. Entonces, es posible que desee usar clases en su lugar:

var id= $(".moveID").attr("id");
$(".moveID").removeAttr("id").find("select").addClass(id);

(Actualizado)

Respondido 02 Feb 12, 02:02

Esto debería hacerlo:

$('.moveID').each(function() {
    // record current ID
    var id = this.id;

    // find the first HTMLElement inside
    var child = this.firstChild;
    while (child && child.nodeType != 1) {
        child = child.nextSibling;
    }

    // if found, swap the IDs
    if (child) {
        this.removeAttribute('id');
        child.setAttribute('id', id);
    }
});

Consulte nuestra página http://jsfiddle.net/dqN8n/3/

Esto usa jQuery para encontrar los elementos que se moverán, pero luego usa métodos DOM nativos para realizar los cambios. Esto será mucho más eficaz que la alternativa:

$('.moveID').each(function() {
    var id = this.id;
    $(this).removeAttr('id').children().first().attr('id', id);
}

porque no hay creación de muchos objetos jQuery intermedios, y hay (como máximo) dos llamadas a funciones en lugar de cinco.

Respondido 02 Feb 12, 02:02

Eso no cumple con "También quiero que se automatice para que si tengo 20 cuadros de selección no tenga 20 líneas separadas de jQuery". - Kyle Macey

@KyleMacey oops, me perdí ese bit ... arreglado ahora - Alnitak

La versión que no es de jQuery debe tener mucho cuidado de que firstChild es en realidad el elemento deseado. Unos pocos espacios en el HTML pueden hacer que firstChild sea un nodo de texto. Esa es una de las ventajas de usar jQuery, ya que salta directamente sobre los nodos de texto y solo encuentra elementos reales. - jfriend00

Probé su versión que no es de jQuery. No funciona porque no hay un método llamado removeAttr. Y, cuando arregla eso, no funciona porque selecciona un nodo de texto, no el nodo de selección. - jfriend00

@ jfriend00 estás viendo una versión antigua. - Alnitak

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.