Liste de sélecteurs

**Sylvercis** · 06/09/2015, 14h24

Bonjour,

j'aimerai créer une fonction pour appliquer des modifications CSS ou d'autres choses à certains éléments de mon site.

Pour cela je voudrai sélectionner mes éléments:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$e1 = $('#div1');
$e2 = $('#titre');
$e3 = $('.boutons, #navbouton');

et ensuite, soit je transmet ces element dans un tableau a une fonction, soit il faudrai que j'ajoute une fonction a jquery pour appliquer les changements au fur et a mesure que je sélectionne les éléments.
Je précise que pour sélectionner les éléments je veux pouvoir faire des sélections un peu compliquées et donc il faut rester sur le principe d'une sélection en plusieurs étapes, avec des sélections unitaires ou groupées comme ci au dessus .

En imaginant que je veuille faire un truc dans le genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function relook( $list ) {
  $.each( $list, function( i, $e ) {
    $e.css('background','#f00');
    $e.addClass("edition");
  }
}

comment créer le tableau $list a partir des variables $e1 $e2 $e3 et comment écrire correctement la fonction ci-dessus.

Et sinon il y aurai l'autre méthode, en ajoutant une fonction à jquery, qui serait surement plus propre mais là c'est pareil, je suis un peu perdu au niveau de la déclaration de la fonction et de la syntaxe globalement.

merci

**NoSmoking** · 06/09/2015, 14h42

Bonjour,
un lien vers la documentation officielle ► Multiple Selector (“selector1, selector2, selectorN”)

**Sylvercis** · 06/09/2015, 16h53

oui...
cet exemple ne m'aide pas beaucoup, je suis toujours aussi perdu.
ce que je veux pouvoir faire c'est ça par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$a = $('#div1' ).parent();
$b = $('.boutons, #zebouton');

Ensuite je veux fusionner $a et $b pour les transmettre à ma fonction.

a priori je peux peut etre utiliser ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$.merge($a,$b)

Je vais faire des tests, on verra bien.

**Sylvercis** · 06/09/2015, 18h03

ça y est, j'arrive à assembler et séparer mes sélecteurs, je devrais m'en sortir maintenant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$e1 = $('#header');
$e2 = $('a');
$.merge($e1, $e2); // tout dans $e1
 
$.each( $e1, function() {
   // du code avant...
   $(this).css('background','#f00');
   // du code après...
});

**danielhagnoul** · 06/09/2015, 21h27

Certains doivent se demander pourquoi le code ci-dessus "semble" fonctionner, essentiellement parce que si un objet jQuery n'est pas un Array on peut retrouver les éléments du DOM qu'il contient en le manipulant comme un Array.

Voir dans ma FAQ : Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?.

$.merge()

La méthode merge( array1, array2, ...arrays), ajoute au premier Array (array1) le contenu de tous les autres.

Pour éviter l'altération du premier Array, il faut partir d'un Array vide : merge( [], array1, array2, ...arrays).

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
    hr { margin-top: 1.5rem; }
    .edition { color: lightGrey; }
  </style>
</head>
<body>
 
  <h3 id="titre">Titre</h3>
  <hr>
  <div id="div1">Hello</div>
  <hr>
  <div class="boutons">
    <button id="btn1">Btn 1</button>
    <button id="btn2">Btn 2</button>
    <button id="btn3">Btn 3</button>
  </div>
  <hr>
  <button id="navBouton">Nav Bouton</button>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
      let
        jObjDiv1 = $( "#div1" ),
        jObjTitre = $( "#titre" ),
        jObjBtns = $( ".boutons, #navBouton" ),
        relook = function( domArray ) {
          $.each( domArray, function( i, item ) {
            $( item )
              .css( "background-color", "red" )
              .addClass( "edition" );
          });
        };
 
      /*
       * $.merge() !  http://api.jquery.com/jQuery.merge/
       * Merge the contents of two arrays together into the first array.
       */
 
      relook( $.merge( jObjDiv1, jObjBtns ) );
 
      // Mais il y a un os, jObjDiv1 a été transformé !
 
      console.log( jObjDiv1 );
 
      jObjDiv1.eq( 1 ).css( "background-color", "yellow" );
 
      // Il faut partir d'un nouvel array
 
      $.each( $.merge( [ ], $( "#btn2" ), $( "#navBouton" ) ), function( i, item ){
        $( item ).css({
          "padding" : "0.5rem",
          "margin-left" : "1rem"
        });
      });
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

**Sylvercis** · 07/09/2015, 21h55

Merci pour ces précisions,

pour ce qui est de la nature de l'objet retourné par les sélecteurs, ce n'est pas pas encore très clair pour moi mais c'est déjà un peu moins flou

et pour la fonction $.merge, je n'avais pas vu la méthode pour fusionner les 2 arrays (ou plus) dans un nouveau array.
Pourtant c'était bien spécifié sur la doc officielle.

C'est quand même mieux lorsque c'est expliqué en français

Liste de sélecteurs

jQuery

Discussions similaires

Partager

Partager