J'ai essayé d'extraire une image pour afficher comme une image d'arrière-plan sur mes éléments LI.
Le nombre exact de LI est indéfini mais mon code n'est pas efficace dans la gestion de cela comme je devais écrire manuellement ces . Je ne suis pas sûr que le meilleur moyen de boucler de cela afin qu'il ne nécessite pas de processus manuel lorsque plus de LI sont ajoutés. P>
$('.carousel').each(function(){
var i = 0;
$(this).find("li").each(function(){
i++;
$(this).addClass('thumbnail'+i);
});
$(this).find("li.thumbnail1").css('background-image', 'url(' + $(this).find('.item:nth-child(1) img').attr('src') + ')');
$(this).find("li.thumbnail2").css('background-image', 'url(' + $(this).find('.item:nth-child(2) img').attr('src') + ')');
$(this).find("li.thumbnail3").css('background-image', 'url(' + $(this).find('.item:nth-child(3) img').attr('src') + ')');
$(this).find("li.thumbnail4").css('background-image', 'url(' + $(this).find('.item:nth-child(4) img').attr('src') + ')');
$(this).find("li.thumbnail5").css('background-image', 'url(' + $(this).find('.item:nth-child(5) img').attr('src') + ')');
});
3 Réponses :
var that = this;
$(this).find("li").each(function(index){
var imgSrc = $(that).find('.item:nth-child(' + (index+1) + ') img').attr('src');
$(this).css('background-image', 'url(' + imgSrc + ')');
});
I think this makes more sense than what you're doing. The jquery .each function has an Index as the first argument so you can find the matching .item with the same index if that's what you need
Vous n'avez pas besoin du .Chafe () parce que < Code> .CSS () peut le faire pour vous: $ ('li', que) .CSS ("image-image", fonction (IDX) {retour 'URL (" '+ (que) .Find ('. article: Nth-enfant ('+ (IDX + 1) +') img '). ATTR (' SRC ') +' ") ';});
Lorsque vous utilisez la fonction $. Chercher (), vous pouvez transmettre des arguments. Par exemple: où i est l'index, et o est l'objet lui-même (dans votre cas, le li élément).
Donc, vous pouvez essayer de faire cela:
la réécriture comme si tellement est un peu plus efficace.
$('.carousel').each(function(){
var $carousel = $(this);
$carousel.find("li").each(function(index){
$(this).addClass('thumbnail'+index);
$(this).css('background-image', 'url(' + $carousel.find('.item:nth-child(index) img').attr('src') + ')');
});
});
Je ne comprends pas. Vous êtes déjà en boucle à travers vos Li et ajoutant la classe. Pourquoi ne pas ajouter l'image d'arrière-plan dans cette boucle aussi? Par exemple.
$ (ceci) .CSS ('arrière-fond-image', url (...1) Vous devez ajouter plus de détails à vous aider ... 2) Pourquoi ajouter la classe et ne pas attribuer l'arrière-plan directement dans la boucle?