Question

我无法选择特定的div并用jQuery替换他们的图片。

我的内容是通过一段时间或for循环动态地使用php购买的。下面是带有＆＃34; defPostThumb＆＃34;类的div。是我唯一可以控制的东西。其他一切都是动态的。这就是说，内容结构基本上如下所示：

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

由于内容是以原始形式动态购买的，因此我输入了一个占位符图像，名为＆＃34; defaultThm.jpg ＆＃34;它位于div中，类别为＆＃34; defPostThumb ＆＃34;。

我想要做的是根据jQuery在div PostContent 中找到的第一个图像为每个代码块或内容部分创建缩略图。

基本上，由于我不知道该图像或来源是什么，我复制了我在PostContent div中找到的第一张图像的来源，并将其附加到占位符图像

到目前为止，我已经能够通过以下方式得到结论：

$(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");

等等，但它并不好。

我想要每个内容块，在本地搜索它找到的第一个图像，并将该图像源附加到其父div的默认图像src INSIDE。

我该怎么做？

Answer 1

对每个.Postcontent使用Jquery each()方法，然后更改其parent()中包含的src的{{1}}。

.defPostThumb img

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

Answer 2

尝试

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这应该这样做：

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

Answer 4

有很多不同的方法可以做到这一点（有些方法比其他方式更灵活）。

一种方法是选择一个共同的父，然后从中遍历。例如，postWrapper元素看起来像这样：

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

小提琴：http://jsfiddle.net/r6y6gehz/

使用缩略图工作怎么样？像这样：

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

小提琴：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);
});

小提琴：http://jsfiddle.net/mkgh9v3L/

如果您不是each的粉丝（或者只是更喜欢jQuery＆＃39; implicit iteration来完成任务），那该怎么做：

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

小提琴：http://jsfiddle.net/0jjwf1hk/

有很多方法可以完成同样的事情。你有希望注意到的一件事是DOM traversing更多，更灵活＆＃34;相对于其它的。调用next需要/假定元素的某个顺序，其中选择一个共同的父母并找到图像更加宽松/灵活。

祝你好运！

在具有相同类的多个div上查找最接近的图像

4 个答案: