如何顯示每個帶有.className的div的圖像？

Question

我只想在每個div.className中顯示第一個圖像。

這個...

<div class="className">
  <p>Yo yo yo</p>
  <p><img src="snoop.jpg" /></p>
</div>
<div class="className">
  Helloooooo
  <img src="biggie.jpg" />
  <img src="tupac.jpg" />
  <img src="coolio.jpg" />
  Blah blah blah
</div>
<div class="className">
  <div><img src="dmx.jpg" /></div>
  <div><img src="willsmith.jpg" /></div>
</div>

將顯示為...

[snoop.jpg]
[biggie.jpg]
[dmx.jpg]

僅顯示每個div.className的第一個圖像，而沒有其他所有內容。 內容是動態的，並且經常更改。

我嘗試過的jQuery：

var imgarray = $(".className").find("img:first").attr('src');
for(i = 0; i < imgarray.length; i++){
  $('body').append('<img src=\"'+imgarray[i]+'\">');
}

...

（以獲取每個圖像的SRC ...）

$('.className').each(function() {
  alert( $('img').attr('src') );
});

什么都沒用。 我在這里先向您的幫助表示感謝）！ 順便說一句，我是非常前端的HTML / CSS，而不是jQuery。

編輯：固定錯別字（在圖像SRC之后省略引號）

編輯：非常感謝大家！ 這是我實施已檢查答案的方法，以便為我工作：

<style type="text/css">
  .className {
    display: none;
  }
</style>

<div class="className">
  <p>Yo yo yo</p>
  <p><img src="snoop.jpg" /></p>
</div>
<div class="className">
  Helloooooo
  <img src="biggie.jpg" />
  <img src="tupac.jpg" />
  <img src="coolio.jpg" />
  Blah blah blah
</div>
<div class="className">
  <div><img src="dmx.jpg" /></div>
  <div><img src="willsmith.jpg" /></div>
</div>

<script type="text/javascript">

  $('.className').each(function() {
    var imagesrc = $(this).find('img').first().attr('src') ;
    $('body').append( '<img src=\"' + imagesrc + '\">');
  });

</script>

Answer 1

您必須使用.find()和.find() .first()來完成所需的操作。

嘗試，

$('.className').each(function() {
  alert( $(this).find('img').first().attr('src') );
});

Answer 2

您可以使用.find（）和：first-selector

$('.className').find('img:first').show()

演示： 小提琴

Answer 3

這是一個JavaScript解決方案，它將在類名稱為className的元素的每個子節點上進行線性搜索。 需要問的一個問題是：默認情況下，每個圖像都隱藏嗎？

    <div class="className">
        <img style="display:none;" src="x" />
        <img style="display:none;" src="x" />
    </div>
   <div class="className">
        <img style="display:none;" src="x" />
        <img style="display:none;" src="x" />
    </div>
   <div class="className">
        <img style="display:none;" src="x" />
        <img style="display:none;" src="x" />
    </div>

<script>
 var el = document.getElementsByClassName('className');
  for(var a = 0; a < el.length; a++) {
   for (var i = 0; i < el[a].childNodes.length; i++) {
    if(el[a].childNodes[i].tagName == "IMG") {
        el[a].childNodes[i].style.display="block";
        console.log(el[a].childNodes[i].src);
        break;
    }
   }
  }

</script>

演示： 小提琴

Answer 4

在澄清您的問題后，我分三部分作了回答。

首先，將文字隱藏在跨度中

$('.className').contents().filter(function(){
    return this.nodeType == 3 && $.trim(this.nodeValue).length;
}).wrap('<span class="spanhide" style="display: none;" />');

其次，隱藏所有圖像

$('img', '.className').each(function () {
    var img = $(this);
    console.log("hide->" + img.attr('src'));
    img.hide();
 });

第三，在每個className div中顯示第一個圖像

$('img:first', '.className').each(function () {
    var img = $(this)
    console.log("show->" + img.attr('src'));
    img.show();
});