11348 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je suis nouveau par ici car je bloque sur une fonction jQuery. Je souhaite envelopper tous les enfants d'une .class dans une nouvelle div sauf un élément (la seule image). Je n'ai pas accès au HTML.

J'ai la structure suivante :

<ul class="products">
    <li class="product">
        <a href="#" class="link">
            <span>...</span>
            <img>...</img>
            <span>...</span>
            <h2>...</h2>
            <div>...</div>
        </a>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>


Fonction 1, j'enveloppe tous les enfants de .link :

$(function(){
    $('.link').wrapInner( '<div class="new"></div>' );
});


Fonction 2, je sors l'image de la nouvelle div :

$(function() {
    $('ul.products > li > a > img').each(function() {
        $(this).closest('li').prepend(this);
    });
});


Ça fonctionne mais j'aurai voulu remettre l'image dans son emplacement d'origine pour qu'elle soit toujours dans le lien cliquable. Ma fonction 2 me permet seulement de la déplacer dans l'élément <li> :
$(this).closest('li').prepend(this);

J'ai essayé ça :
$(this).closest('a').prepend(this);

...mais ça marche pas...

Votre aide serait grandement appréciée.

Merci.
Modifié par o2xigen (07 May 2020 - 10:51)
Bonjour,

Si vous mettez ça


$('ul.products .new img').each(function() {
		 $(this).closest('li').find('.link').prepend(this);
    });


cela vous convient ?

Bien à vous
Désolé pour le retour un peu tardif.

J'ai finalement réussi à obtenir ce que je voulais en utilisant cette approche :

$(function(){
    $(".link").wrapInner( "<div class='new'></div>" );
  $(".new img").each(function() {
    $(this).parent().before(this);
  });
});


Et ça fonctionne parfaitement.

Merci !