jQuery => Manipulación de DOM

Creando elementos DOM

La función jQuery (normalmente con un alias como $ ) se puede usar tanto para seleccionar elementos como para crear nuevos elementos.

var myLink = $('<a href="http://stackexchange.com"></a>');

Opcionalmente puede pasar un segundo argumento con atributos de elementos:

var myLink = $('<a>', { 'href': 'http://stackexchange.com' });

'<a>' -> El primer argumento especifica el tipo de elemento DOM que desea crear. En este ejemplo es un ancla pero podría ser cualquier cosa en esta lista . Ver la especificación de referencia de la a elemento.

{ 'href': 'http://stackexchange.com' } -> el segundo argumento es un Objeto de JavaScript que contiene pares de nombre / valor de atributo.

los pares 'nombre': 'valor' aparecerán entre los < > del primer argumento, por ejemplo <a name:value> que para nuestro ejemplo sería <a href="http://stackexchange.com"></a>

Manipular las clases de elementos.

Asumiendo que la página incluye un elemento HTML como:

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery proporciona funciones útiles para manipular las clases de DOM, sobre todo hasClass() , addClass() , removeClass() y toggleClass() . Estas funciones modifican directamente el atributo de class de los elementos coincidentes.

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

Alternar una clase

Dado el marcado de ejemplo, podemos agregar una clase con nuestro primer .toggleClass() :

$(".small-paragraph").toggleClass("pretty");

Ahora esto devolvería true : $(".small-paragraph").hasClass("pretty")

toggleClass proporciona el mismo efecto con menos código que:

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

alternar dos clases:

$(".small-paragraph").toggleClass("pretty cool");

Booleano para agregar / eliminar clases:

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

Función para alternar la clase (vea el ejemplo más abajo para evitar un problema)

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Utilizado en ejemplos:

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

Ejemplos:

Usa el índice del elemento para alternar entre las clases impar / par

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Más complejo ejemplo de toggleClass , dado un marcado de cuadrícula simple

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

Funciones simples para nuestros ejemplos:

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

Agrega una clase par / impar a los elementos con una clase gridrow

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

Si la fila tiene una clase de gridfooter , elimine las clases impares / pares, conserve el resto.

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

Las clases que se devuelven son las que se efectúan. Aquí, si un elemento no tiene un gridfooter , agregue una clase para par / impar. Este ejemplo ilustra el retorno de la lista de clases OLD. Si esto else return oldClasses; se elimina, solo se agregan las nuevas clases, por lo tanto, la fila con una clase de gridfooter tendría todas las clases eliminadas si no hubiéramos devuelto las anteriores; de lo contrario, se habrían cambiado (eliminado).

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);

Otros métodos API

jQuery ofrece una variedad de métodos que se pueden utilizar para la manipulación de DOM.

El primero es el método .empty () .

Imagina el siguiente marcado:

<div id="content">
  <div>Some text</div>
</div>

Llamando a $('#content').empty(); , el div interior sería eliminado. Esto también podría lograrse utilizando $('#content').html(''); .

Otra función útil es la función .closest () :

<tr id="row_1">
  <td><button type="button" class="delete">Delete</button>
</tr>

Si desea encontrar la fila más cercana a un botón en el que se hizo clic dentro de una de las celdas de la fila, puede hacer esto:

$('.delete').click(function() {
  $(this).closest('tr');
});

Como probablemente habrá varias filas, cada una con sus propios botones de delete , usamos $(this) dentro de la función .click () para limitar el alcance al botón en el que realmente hicimos clic.

Si desea obtener el id de la fila que contiene el botón Delete que hizo clic, podría hacer algo como esto:

$('.delete').click(function() {
  var $row = $(this).closest('tr');
  var id = $row.attr('id');
});

Por lo general, se considera una buena práctica prefijar las variables que contienen objetos jQuery con un $ (signo de dólar) para aclarar qué es la variable.

Una alternativa a .closest() es el método .parents () :

$('.delete').click(function() {
  var $row = $(this).parents('tr');
  var id = $row.attr('id');
});

y también hay una función .parent () también:

$('.delete').click(function() {
  var $row = $(this).parent().parent();
  var id = $row.attr('id');
});

.parent() solo sube un nivel del árbol DOM, por lo que es bastante inflexible, si tuviera que cambiar el botón de eliminar para que esté contenido dentro de un span por ejemplo, el selector jQuery se rompería.

.html ()

Puede usar este método para reemplazar todo el HTML dentro del selector. Asumiendo que tienes un elemento html como este

<div class="row">
    <div class="col-md-12">
        <div id="information">
            <p>Old message</p>
        </div>
    </div>
</div>

Podrías usar .html() . para eliminar y agregar una alerta o texto informativo para alertar a los usuarios con una sola línea.

$("#information").html("<p>This is the new alert!</p>");

Elementos de clasificación

Para ordenar los elementos de manera eficiente (todos a la vez y con una mínima interrupción de DOM), necesitamos:

Encontrar los elementos
Clasificación basada en una condición establecida
Insertar de nuevo en el DOM

<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

Encuéntralos - .children() o .find()

Esto nos devolverá un objeto similar a un Array para jugar.

var $myColorList = $('#my-color-list');

// Elements one layer deep get .children(), any deeper go with .find()
var $colors = $myColorList.children('li');

Re-organizarlos - Array.prototype.sort()

Actualmente está configurado para devolver los elementos en orden ascendente según el contenido HTML (también conocido como sus colores).

/**
 * Bind $colors to the sort method so we don't have to travel up
 * all these properties more than once.
 */
var sortList = Array.prototype.sort.bind($colors);

sortList(function ( a, b ) {

    // Cache inner content from the first element (a) and the next sibling (b)
    var aText = a.innerHTML;
    var bText = b.innerHTML;
 
    // Returning -1 will place element `a` before element `b`
    if ( aText < bText ) {
        return -1;
    }

    // Returning 1 will do the opposite
    if ( aText > bText ) {
        return 1;
    }

    // Returning 0 leaves them as-is
    return 0;
});

.append() - .append()
Tenga en cuenta que no es necesario separar los elementos primero: append() moverá los elementos que ya existen en el DOM, por lo que no tendremos copias adicionales
```
// Put it right back where we got it
$myColorList.append($colors);
```

Hazlo lindo

Añadir un botón de clasificación

<!-- previous HTML above -->
<button type='button' id='btn-sort'>
    Sort
</button>

Establecer el valor inicial de la dirección de clasificación

var ascending = true;

`sortList()` caché nuestros elementos DOM y `sortList()` aquí para minimizar nuestro procesamiento DOM

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

Envuelve todo en una función `doSort()`

// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {

    sortList(function ( a, b ) {
        // ...
    });

    $myColorList.append($colors);
};

Agregar el controlador de clic para `$('#btn-sort')`

$('#btn-sort').on('click', function () {
    // Run the sort and pass in the direction value
    doSort(ascending);

    // Toggle direction and save
    ascending = !ascending;
});

Todos juntos ahora

var ascending = true;

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

var doSort = function ( ascending ) {
    
    sortList(function ( a, b ) {

        var aText = a.innerHTML;
        var bText = b.innerHTML;

        if ( aText < bText ) {
            return ascending ? -1 : 1;
        }

        if ( aText > bText ) {
            return ascending ? 1 : -1;
        }

        return 0;
    });
    
    $myColorList.append($colors);

};

$('#btn-sort').on('click', function () {
    doSort(ascending);
    ascending = !ascending;
});

Prima

Clasificación multinivel (agrupación de elementos ordenados)

// ...

var doSort = function ( ascending ) {

    sortList(function ( a, b ) {

        // ...initial sorting...

    }).sort(function ( a, b ) {
        
        // We take the returned items and sort them once more
        var aClass = a.className;
        var bClass = b.className;
        
        // Let's group the disabled items together and put them at the end

        /**
         * If the two elements being compared have the same class
         * then there's no need to move anything.
         */
        if ( aClass !== bClass ) {
            return aClass === 'disabled' ? 1 : -1;
        }
        return 0;
    });

    // And finalize with re-insert
    $myColorList.append($colors);
};

// ...

¿Puedes ir un paso más allá?

Agregar otro botón para alternar la clasificación de grupos deshabilitados

MDN - Array.prototype.sort ()

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

jQuery
Manipulación de DOM

Buscar..

Creando elementos DOM

Manipular las clases de elementos.

Otros métodos API

.html ()

Elementos de clasificación

Hazlo lindo

Añadir un botón de clasificación

Establecer el valor inicial de la dirección de clasificación

`sortList()` caché nuestros elementos DOM y `sortList()` aquí para minimizar nuestro procesamiento DOM

Envuelve todo en una función `doSort()`

Agregar el controlador de clic para `$('#btn-sort')`

Todos juntos ahora

Clasificación multinivel (agrupación de elementos ordenados)

Agregar otro botón para alternar la clasificación de grupos deshabilitados

Creando elementos DOM

Manipular las clases de elementos.

Otros métodos API

.html ()

Elementos de clasificación

Hazlo lindo

Añadir un botón de clasificación

Establecer el valor inicial de la dirección de clasificación

sortList() caché nuestros elementos DOM y sortList() aquí para minimizar nuestro procesamiento DOM

Envuelve todo en una función doSort()

Agregar el controlador de clic para $('#btn-sort')

Todos juntos ahora

Clasificación multinivel (agrupación de elementos ordenados)

Agregar otro botón para alternar la clasificación de grupos deshabilitados

`sortList()` caché nuestros elementos DOM y `sortList()` aquí para minimizar nuestro procesamiento DOM

Envuelve todo en una función `doSort()`

Agregar el controlador de clic para `$('#btn-sort')`