从特定内容 div 中的第一个图像获取图像源

Question

我想从我网站的#main-content div 中的第一张图片中获取 src 属性。它嵌套得很深，我见过的许多其他 stackoverflow 示例更简单，不符合我的要求。我找到的最接近的是How to get image source of first image with JQuery?

我尝试定位的图像没有 ID，也不会应用 ID。这是 HTML 代码模式（这是段不完整的页面代码）：

<div id="main-content">
  <div id="gallery-type-2">
    <div class="gallery-image">
      <img src="images/my-image.png" alt="my image" />
    </div>
  </div>
</div>

现在这段代码非常简化，网站中有很多类型的页面模板，但我正在寻找的常见模式是#main-content 下的第一张图片。

我尝试使用的jQuery代码是：

var postImage = $('#main-content img').first().attr('src');
console.log(postImage);

检查员不断返回未定义。我尝试将其作为数组 [0] 进行，但也没有任何运气。

Answer 1

你想要这样的东西吗？

 $("#main-content").find("img:first").css({"color": "red", "border": "2px solid red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-content">
  <div id="gallery-type-2">
    <div class="gallery-image">
      <img src="https://i.stack.imgur.com/LJtQG.png?s=32&g=1" alt="my image" />
    </div>
     <div class="gallery-image">
      <img src="https://i.stack.imgur.com/LJtQG.png?s=32&g=1" alt="my image" />
    </div>
     <div class="gallery-image">
      <img src="https://i.stack.imgur.com/LJtQG.png?s=32&g=1" alt="my image" />
    </div>
  </div>
</div>

Answer 2

这在包含jQuery 的情况下可以正常工作。

var postImage = $('#main-content img').first().attr('src');
console.log(postImage);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="main-content">
    <div id="gallery-type-2">
        <div class="gallery-image">
            <img src="images/my-image.png" alt="my image" />
        </div>
    </div>
</div>