11528 sujets

JavaScript, DOM et API Web HTML5

[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.

upload/1601804116-79795-recentposts.jpg
Modifié par o2xigen (04 Oct 2020 - 11:36)
Modérateur
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,
Modérateur
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'));
	});
});
Modérateur
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,
Modérateur
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 ! Smiley smile J'ai été trop lent ! Smiley biggrin

Amicalement,
\ô/

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));
  });
});
Sujet clos
Aller à