javascript - 每个父级的 div 都应该有自己的背景。图像的路径在里面。怎么做？

Question

如何使每个 block 背景与图片上的路径相同。我无法理解。现在所有 block 都是大背景

   var width = document.documentElement.clientWidth,
     height = width / 3,
     bg = $('.views-field-nothing').find('.views').html();
   bg = "url('" + bg + "')";
    //$(".views-field-nothing").attr("<img src=", bg);

   $(".views-field-nothing").css('background', bg);

   $(".views-field-nothing").css('height', height);
   $(".views-field-nothing").css('width', width);

.views-field-nothing {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="views-field-nothing">
  <div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>

Answer 1

问题中的

js 似乎只设置了第一个 .views-field-nothing 元素的 background。

使用.each()迭代所有.views-field-nothing:bg元素，设置width 和 height background 通过使用选择器 $(".views", this) , .html() 内循环

var width = document.documentElement.clientWidth,
  height = width / 3,
  bg = $(".views-field-nothing");

bg.each(function() {
  $(this).css({
    background: "url(" + $(".views", this).html() + ")",
    height: height,
    width: width
  })
});

.views-field-nothing {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="views-field-nothing">
  <div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>