[Résolu] Déplacer image dans un lien (jQuery)

Bonjour,

Sur WordPress, j'aimerai déplacer l'image du widget "Articles Récents" dans le lien.

Voici comment le HTML se présente :

<ul>
	<li>
		<img>
		<a href="#">Titre</a>
	</li>
	<li>
		<img>
		<a href="#">Titre</a>
	</li>
</ul>

Du coup, j'essaye de procéder comme ça :

$(function(){
	$(".widget_recent_entries li img").each(function() {
		$(this).prependTo('.widget_recent_entries li a');
	});
});

Sauf que chaque image est dupliqué dans toutes les lignes (voir screenshot).

Je trouve pas mon erreur, si quelqu'un peut me venir en aide.

Je vous remercie.


Modifié par o2xigen (04 Oct 2020 - 11:36)

Bonjour,

Ta manière de cibler l'image n'est pas passez spécifique.

Si l'image est toujours le premier élément du <li>, tu peux essayer $(".widget_recent_entries li:first-child") au lieu de $(".widget_recent_entries li img").

Si ça ne marche toujours pas, il faut essayer d'être encore plus sélectif.

Amicalement,

Bonjour,

Il faut peut-être modifier $(this).prependTo('.widget_recent_entries li a') aussi (ou surtout).

Toujours pareil, il faut être assez sélectif pour ne cibler que le lien concerné.

Amicalement,

PS : juste avec le code que tu donnes, c'est assez difficile de te dire comment cibler exactement (sauf à construire une démo spécialement pour ça, ce qui est un peu lourd).

Finalement après 2 heures de recherche sur le web anglophone j'ai réussi avec cette approche :

$(function(){
	$(".widget_recent_entries li img").each(function() {
		$(this).prependTo($(this).siblings('.widget_recent_entries li a'));
	});
});

Bonjour,

Bon, j'ai mis un peu de temps à capter comment faire (et j'ai finalement fait une petite démo pour vérifier). En fait, il faut cibler dans un premier temps les li.

$(function(){
	$(".widget_recent_entries li").each(function() {
		$(this).find("img").prependTo($(this).find("a"));
	});
});

Amicalement,

o2xigen a écrit :
Finalement après 2 heures de recherche sur le web anglophone j'ai réussi avec cette approche :

$(function(){
	$(".widget_recent_entries li img").each(function() {
		$(this).prependTo($(this).siblings('.widget_recent_entries li a'));
	});
});

OK ! J'ai été trop lent !

Amicalement,

Par contre super ton approche. Plus compréhensible je trouve. Merci beaucoup.

\ô/

peut-être plus concis ...
en ciblant les liens :

$(function () {
  $(".widget_recent_entries li a").each(function () {
    $(this).prepend($(this).prev());
  });
});

ou en ciblant les images :

$(function () {
  $(".widget_recent_entries li img").each(function () {
    $(this).next().prepend($(this));
  });
});