JQuery : si un élément HTML n'est pas chargé, modifier un autre

Question

J'ai regardé partout et je ne trouve rien de similaire à ce dont j'ai besoin d'aide.

--

J'ai deux DIV, alignés à gauche pour qu'ils apparaissent côte à côte. Dans celui de gauche, j'ai l'image du produit, et dans celui de droite, la description/information du produit.

Parfois, l'image du produit ne s'affiche pas sur la page, c'est parce que le gestionnaire de produits (il y en a plusieurs dans l'entreprise où je travaille) peut ne pas avoir d'image du produit, donc, ils ne téléchargeront pas d'image dans le CMS, ainsi, sur la page du produit, seule la description/information apparaîtra.

Ce dont j'ai besoin

Ce dont j'ai besoin est un moyen de détecter si le DIV de l'image du produit a été injecté dans la page ou non.

Si c'est le cas, pas de problème, les deux conteneurs conservent leurs largeurs. Mais si le DIV de l'image du produit n'est pas présent sur la page, alors j'ai besoin de modifier la largeur du DIV de la description du produit pour qu'elle soit plus large (sinon, elle conservera sa largeur et il y aura de l'espace inutilisé à sa droite).

Cela a du sens ?

Voici le code de base :

HTML:

Image du produit
Description/information du produit

CSS:

#product-wrapper { float:left; width:200px; }
#product-description { float:left; width:400px; }

Merci !

Answer 1

Avez-vous essayé d'utiliser uniquement le CSS?

Par exemple, si les éléments sont des frères, quelque chose comme ceci pourrait fonctionner.

Vous devrez tester dans IE pour vous assurer que le sélecteur + fonctionne correctement.

Exemple : http://jsfiddle.net/j6zsL/ (Supprimez l'élément product-wrapper, et cliquez sur Run. Vous verrez que la product-description deviendra plus large.)

#product-wrapper { 
    float:left; 
    width:200px; 
    height: 200px;
    background: orange;​
}
#product-description { 
    float:left;
    height:200px;
    width:600px;
    background:red;
}

#product-wrapper + #product-description {
    width:400px;
}

Ici, la largeur par défaut de product-description est de 600px, mais si elle a un product-wrapper devant, elle est de 400px.

Answer 2

Une façon est :

if ($('#product-wrapper img').length)
{
  ...
}

Cela suppose que la balise img n'est pas présente, plutôt qu'un lien d'image cassé.

Answer 3

if(!$("#product-wrapper").length){ $("#product-description").width(600) }

Answer 4

Si l'image n'est pas présente, la totalité de la product-wrapper div ne sera pas sur la page, n'est-ce pas?

Vous pouvez essayer d'obtenir l'élément, et voir si cela réussit.

La méthode standard JS serait

if(document.getElementById('product-wrapper')){/* faire quelque chose */}

Avec jQuery,

if($('#product-wrapper').length){/* faire quelque chose */}

La fonction de sélecteur jQuery renvoie un tableau. Si le tableau contient quelque chose, ce qui précède renverra vrai, et donc l'élément existe.

Answer 5

Ajoutez ceci à votre javascript :

if ($('#product-wrapper').length == 0) {
  $('product-description').addClass('wide');
}

Et ceci à votre CSS :

#product-description.wide {
  width: 600px;
}