Question

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

我尝试定位的图片没有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的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: