jQuery
Manipulation DOM

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript PHP Ruby on Rails twitter-bootstrap
Recherche…


Créer des éléments DOM

La fonction jQuery (généralement appelée alias $ ) peut être utilisée à la fois pour sélectionner des éléments et pour créer de nouveaux éléments. 

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

Vous pouvez éventuellement passer un deuxième argument avec des attributs d'élément: 

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

'<a>' -> Le premier argument spécifie le type d'élément DOM que vous souhaitez créer. Dans cet exemple, il s’agit d’une ancre mais pourrait être n'importe quoi sur cette liste . Voir la spécification d'une référence de l' a élément.

{ 'href': 'http://stackexchange.com' } -> le second argument est un objet JavaScript contenant des paires nom / valeur d'attribut.

les paires 'name': 'value' apparaîtront entre le < > du premier argument, par exemple <a name:value> qui, dans notre exemple, serait <a href="http://stackexchange.com"></a>

Manipulation des classes d'éléments

En supposant que la page inclut un élément HTML tel que: 

<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 fournit des fonctions utiles pour manipuler les classes DOM, notamment hasClass() , addClass() , removeClass() et toggleClass() . Ces fonctions modifient directement l'attribut de class des éléments correspondants. 

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

Basculer une classe

Étant donné le balisage d'exemple, nous pouvons ajouter une classe avec notre premier .toggleClass() : 

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

Maintenant ceci retournerait true : $(".small-paragraph").hasClass("pretty")

toggleClass fournit le même effet avec moins de code que: 

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

basculer deux classes: 

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

Booléen pour ajouter / supprimer des classes: 

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

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

Fonction de basculement de classe (voir exemple plus bas pour éviter un problème) 

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

Utilisé dans des exemples: 

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

Exemples:

Utilisez l'index d'élément pour basculer les classes impaires / paires 

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

Exemple de toggleClass plus complexe, avec un balisage 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>

Fonctions simples pour nos exemples: 

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

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

Ajouter une classe impair / paire aux éléments avec une classe gridrow 

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

Si la ligne a une classe gridfooter , supprimez les classes impaires / paires, conservez le reste. 

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

Les classes renvoyées sont ce qui est effectué. Ici, si un élément ne possède pas de gridfooter , ajoutez une classe pour pair / impair. Cet exemple illustre le retour de la liste de classes OLD. Si cela d' else return oldClasses; est supprimé, seules les nouvelles classes sont ajoutées, ainsi la ligne avec une classe gridfooter aura toutes les classes supprimées si nous n'avions pas retourné ces anciennes - elles auraient été basculées (supprimées) sinon. 

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

Autres méthodes API

jQuery offre une variété de méthodes qui peuvent être utilisées pour la manipulation DOM.

Le premier est la méthode .empty () .

Imaginez le balisage suivant: 

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

En appelant $('#content').empty(); , la div interne serait supprimée. Cela pourrait également être réalisé en utilisant $('#content').html(''); .

Une autre fonction pratique est la fonction .closest () : 

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

Si vous souhaitez trouver la ligne la plus proche d'un bouton sur lequel vous avez cliqué dans l'une des cellules de ligne, vous pouvez le faire: 

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

Comme il y aura probablement plusieurs lignes, chacune avec ses propres boutons de delete , nous utilisons $(this) dans la fonction .click () pour limiter la portée au bouton sur lequel nous avons cliqué.

Si vous voulez obtenir l' id de la ligne contenant le bouton Delete sur lequel vous avez cliqué, vous pouvez le faire comme suit: 

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

Il est généralement considéré comme une bonne pratique à des variables de préfixe contenant des objets jQuery avec un $ (signe dollar) pour préciser ce que la variable est.

Une alternative à .closest() est la méthode .parents () : 

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

et il y a aussi une fonction .parent () aussi: 

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

.parent() ne monte que d'un niveau de l'arborescence DOM, donc il est assez rigide, si vous deviez changer le bouton de suppression pour qu'il soit contenu dans un span par exemple, alors le sélecteur jQuery serait cassé.

.html ()

Vous pouvez utiliser cette méthode pour remplacer tout le code HTML du sélecteur. En supposant que vous avez un élément HTML comme celui-ci 

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

Vous pouvez utiliser .html() . supprimer et ajouter un texte d’alerte ou d’information pour alerter les utilisateurs avec une seule ligne. 

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

Éléments de tri

Pour trier efficacement les éléments (en une seule fois et avec une interruption minimale du DOM), nous devons:

  1. Trouver les éléments
  2. Trier en fonction d'une condition définie
  3. Insérer dans le DOM 
<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

  1. Les trouver - .children() ou .find()

    Cela nous redonnera un objet de type Array pour jouer avec. 

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

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

  2. Array.prototype.sort() -les - Array.prototype.sort()

    Ceci est actuellement configuré pour renvoyer les éléments dans l'ordre croissant en fonction du contenu HTML (aka leurs couleurs). 

    /**
 * 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;
});

  3. Insérez-les - .append()

    Notez que nous n'avons pas besoin de détacher les éléments en premier - append() déplacera les éléments qui existent déjà dans le DOM, nous n'aurons donc pas de copies supplémentaires 

    // Put it right back where we got it
$myColorList.append($colors);

Le rendre mignon

Ajouter un bouton de tri 

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

Définir la valeur initiale du sens de tri 

var ascending = true;

sortList() nos éléments DOM et sortList() pour minimiser notre traitement DOM 

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

Emballez le tout dans une fonction doSort() 

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

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

    $myColorList.append($colors);
};

Ajouter un gestionnaire de clic pour $('#btn-sort') 

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

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

Tous ensemble maintenant 

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

Prime

Tri à plusieurs niveaux (regroupement d'éléments triés) 

// ...

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

// ...

Pouvez-vous aller plus loin?

Ajouter un autre bouton pour basculer le tri de groupe désactivé

MDN - Array.prototype.sort ()



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow