2
votes

Sélection du premier élément visible avec le nom de classe

J'essaye de sélectionner le premier élément avec une classe spécifique qui est également visible. Je veux uniquement sélectionner un élément et le stocker en tant que variable.

var bg = element.css('background-image'); // Returns url('http://www.google.com/imageurl')

Pour mon cas d'utilisation spécifique, j'essaye de récupérer ensuite son image d'arrière-plan, c'est donc ce que j'ai est allé si loin. Ma variable renvoie "non défini".

var elements = document.getElementsByClassName('className'); // Get all visible elements with classname.
var element= elements[0]; // Return only the first element from this NodeList

J'utilise jQuery, mais le JavaScript brut est également le bienvenu. Tout ce qui fait le travail le mieux.

javascript jquery

2 commentaires

var element est un élément JS simple. .css est une méthode d'un élément jQuery . Vous essayez d'utiliser des méthodes jQuery sur des objets non jQuery.

@Tyler Roper Merci de l'avoir signalé! Je n'avais pas réalisé que c'était un problème jusqu'à présent. :)

3 Réponses :

0
votes

Vous pouvez utiliser le sélecteur : visible . Quelque chose comme ça $ ('. Classname: visible') .

https://api.jquery.com/visible-selector/

0 commentaires

0
votes

Voici ce que je ferais en utilisant JQuery:

var element = $(".classname:visible:first");
var bg = element.css('background-image');

L'élément contient le premier élément du nom de classe spécifié qui est visible.

6 commentaires

Je reçois l'erreur "Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.element: visible' is not a valid selector." Je crois que l'erreur repose sur le : sélecteur visible, mais je ne suis pas sûr de ce que je fais de mal. : /

@ Chopin23 Désolé, je continue à faire des erreurs. J'ai modifié ma réponse. Cela devrait fonctionner maintenant mais je n'ai pas pu tester.

Pas de problème. :) J'ai modifié mon code pour qu'il corresponde au vôtre et je n'obtiens plus d'erreur, alors je suis un peu plus près! Cependant, var element = $ (". Classname: visible"); renvoie a.fn.init [selector: ".classname: visible", prevObject: n.fn.init (1 ), context: document] , tandis que var element = $ (". classname: visible"). first (); renvoie a.fn.init [selector: "" , prevObject: a.fn.init (0), contexte: document] . Une fois que cela renvoie l'élément correct, je suis sûr que le code d'arrière-plan fonctionnera.

@ Chopin23 quand vous dites qu'il renvoie ce que vous montrez. Est-ce ce à quoi correspond la variable «bg»?

Je crois que votre version précédente du code est ce qui a fonctionné pour moi. Mon code est le suivant var element = $ (". Classname: visible: first"); . La deuxième ligne de code pour récupérer l'URL de l'image d'arrière-plan fonctionne maintenant comme prévu. :) Mes éléments se chargeaient également après le chargement technique du DOM, donc j'avais également besoin d'encapsuler ma fonction dans $ (window) .on ("load", function () pour mon cas d'utilisation spécifique. Merci de votre aide!

@ Chopin23 Cool. J'ai à nouveau modifié mon code pour correspondre à ce qui fonctionnait.

0
votes

$ ('selector: visible') vous obtiendra les éléments visibles correspondant au sélecteur donné

.eq (n) renverra le nième nœud de ceux correspondants

.css ('backgroundImage') vous donnera l'image d'arrière-plan

.match (/ "(. +)" /) [ 1] renverra alors uniquement l'URL de l'image d'arrière-plan:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
  <title>example</title>
</head>
<body>
  <header>
    <h1>Hello World</h1>
  </header>
  <main>
    <section>
      <article class="example" style="background-image:url('https://images.pexels.com/photos/374815/pexels-photo-374815.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');">
        <h2>Bananas</h2>
        <p>Bananas are a great source of potassium.</p>
      </article>
      <article class="example special" style="background-image:url('https://images.pexels.com/photos/707194/pexels-photo-707194.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');">
        <h2>Apples</h2>
        <p>An apple a day will keep the doctor away!</p>
      </article>
      <article class="example" style="background-image:url('https://images.pexels.com/photos/1667580/pexels-photo-1667580.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');">
        <h2>Oranges</h2>
        <p>Oranges make great juice.</p>
      </article>
    </section>
  </main>
</body>

body {
  color: white;
}
.example {
  visibility: hidden;
}
.special {
  visibility: visible;
}

var specialElement = $('.example:visible').eq(1);
specialElement.append(specialElement.css('backgroundImage').match(/"(.+)"/)[1]);

0 commentaires