Найти изображение шкафа на нескольких div с тем же классом

Question

У меня возникли проблемы с выбором конкретных div и заменой их изображений на jQuery.

У меня есть контент, который динамически покупается с помощью php через время или цикл. Ниже, div с классом «defPostThumb» - это единственное, что я могу контролировать. Все остальное динамично. При этом, по сути, содержательная структура будет выглядеть примерно следующим образом:

<div class="postWrapper"> 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
    <div class="PostContent"> 
    <h1>Content here</h1> 
    <img src="IMAGE-ONE.jpg" alt=""> 
    RAW TEXT HERE 
</div> 

//------ 

<div class="postWrapper"> 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
    <div class="PostContent"> 
    <h1>Content here</h1> 
    <img src="IMAGE-TWO.jpg" alt=""> 
    RAW TEXT HERE 
</div> 

//------ 


<div class="postWrapper"> 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
    <div class="PostContent"> 
    <h1>Content here</h1> 
    <img src="IMAGE-THREE.jpg" alt=""> 
    RAW TEXT HERE 
</div> 

Поскольку содержание покупаются в динамически в сыром иш форме, я положил в заполнителем изображение под названием «defaultThm.jpg», который находится в div с классом «defPostThumb».

Что я хочу сделать, это создать миниатюру для каждого блока кода или раздела контента, основанного на первом изображении, которое jQuery находит внутри div PostContent.

По существу, поскольку я не знаю, каким будет это изображение или источник, я копирую источник первого изображения, которое я нашел внутри div PostContent, и добавьте его в образ заполнителя.

До сих пор я был в состоянии получить близко написав это ниже:

$(document).ready(function() { 
    //this is a div to hold my own thumbnails 
    var defPostThumb = $('.defPostThumb img'); 
    //this finds the img tag src on the content div from the feed 
    var imgThm = $('.PostContent').find("img").attr("src"); 
    defPostThumb.attr('src', imgThm); 
}); 

Хотя это работает (частично), случается, что это будет первый блок контента, найти первое изображение и копировать его источник (например, я хотел его) и добавлять его к ВСЕМ изображениям по умолчанию по умолчанию на ВСЕ блоках кода (не то, что я хотел)

Что должно произойти, так это то, что я хочу, чтобы этот поиск был локальным каждый кодовый блок.

я попытался с помощью следующего кода:

var imgThm = $('.feedContActual').parent().find("img").attr("src"); 

и т.д., но это не очень хорошо.

Я хочу, чтобы каждый контентный блок выполнял поиск локально для первого найденного изображения и добавлял этот источник изображения в исходное изображение src INSIDE своего родительского div.

Как я могу это сделать?

Answer 1

Существует множество способов, которыми вы можете это сделать (некоторые более гибкие, чем другие).

Одним из способов является выбор общего родителя, а затем переход от него. Например, postWrapper элемент будет выглядеть примерно так:

$('.postWrapper').each(function(){ 
    var src = $(this).find('.PostContent img:first').attr('src'); 
    $(this).find('.defPostThumb img').attr('src', src); 
}); 

Fiddle: http://jsfiddle.net/r6y6gehz/

Как о работе с миниатюрными изображениями? Что-то вроде этого:

$('img[src="defaultThm.jpg"]').each(function() { 
    var src = $(this).parent().next().find('img').attr('src'); 
    $(this).attr('src', src); 
}); 

Fiddle: http://jsfiddle.net/cx0ugdqL/

Или это:

$('img[src="defaultThm.jpg"]').each(function() { 
    var src = $(this).closest('.postWrapper').find('.PostContent img:first').attr('src'); 
    $(this).attr('src', src); 
}); 

Fiddle: http://jsfiddle.net/mkgh9v3L/

Если вы не любитель each (или просто предпочитают JQuery-х implicit iteration чтобы все было сделано), как насчет:

$('img[src="defaultThm.jpg"]').attr('src', function(){ 
    return $(this).parent().next().find('img').attr('src'); 
}); 

Fiddle: http://jsfiddle.net/0jjwf1hk/

Так много способов сделать то же самое. Одна вещь, которую вы, надеюсь, заметите, это то, что некоторые DOM traversing более «гибкие», чем другие. Вызов next требует/принимает определенный порядок элементов, где, выбирая общий родительский элемент и находив изображения, становится намного более свободным/гибким.

Удачи вам!

Answer 2

Используйте Jquery each() метод для каждого .Postcontent, а затем изменить src в .defPostThumb img содержится в ее parent().

$('.PostContent').each(function(){ 
 
    var imgThm = $(this).find("img").attr("src"); 
 
    $(this).parent().find('.defPostThumb img').attr('src', imgThm); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="postWrapper"> 
 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
 
    <div class="PostContent"> 
 
    <h1>Content here</h1> 
 
    <img src="http://lorempixel.com/50/50" alt=""> 
 
    RAW TEXT HERE 
 
</div> 
 

 
//------ 
 

 
<div class="postWrapper"> 
 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
 
    <div class="PostContent"> 
 
    <h1>Content here</h1> 
 
    <img src="http://lorempixel.com/51/50" alt=""> 
 
    RAW TEXT HERE 
 
</div> 
 

 
//------ 
 

 

 
<div class="postWrapper"> 
 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
 
    <div class="PostContent"> 
 
    <h1>Content here</h1> 
 
    <img src="http://lorempixel.com/52/50" alt=""> 
 
    RAW TEXT HERE 
 
</div>

Answer 3

Попробуйте

$(".defPostThumb img").map(function(i, el) { 
 
    $(el).attr("src", $(".postWrapper").eq(i).find("img").not(el).attr("src")) 
 
});

.defPostThumb img { 
 
    width:50px; 
 
    height:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="postWrapper"> 
 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
 
    <div class="PostContent"> 
 
    <h1>Content here</h1> 
 
    <img src="http://lorempixel.com/100/100/?1" alt=""> 
 
    RAW TEXT HERE 
 
</div> 
 

 
<div class="postWrapper"> 
 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
 
    <div class="PostContent"> 
 
    <h1>Content here</h1> 
 
    <img src="http://lorempixel.com/100/100/?2" alt=""> 
 
    RAW TEXT HERE 
 
</div> 
 

 
<div class="postWrapper"> 
 
    <div class="defPostThumb"><img src="defaultThm.jpg"></div> 
 
    <div class="PostContent"> 
 
    <h1>Content here</h1> 
 
    <img src="http://lorempixel.com/100/100/?3" alt=""> 
 
    RAW TEXT HERE 
 
</div>

Answer 4

Это следует сделать это:

$(document).ready(function(){ 
    $('.defPostThumb img').each(function(i, img) { 
     img.src = $(this).closest(".postWrapper").find(".PostContent img")[0].src; 
    }); 
});