Liste de sélecteurs

Version imprimable

06/09/2015, 14h24
Sylvercis

Liste de sélecteurs
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:

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:

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
06/09/2015, 14h42
NoSmoking

Bonjour,
un lien vers la documentation officielle ► Multiple Selector (“selector1, selector2, selectorN”)
06/09/2015, 16h53
Sylvercis
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:

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:

1 2 $.merge($a,$b)
Je vais faire des tests, on verra bien.

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

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

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:

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>

07/09/2015, 21h55
Sylvercis

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 :D

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