如何获取特定的html元素

Question

我只需要.foo中的图像标记，而不是所有的HTML。我已经摆弄了filter（），children（），find（），我只是不知道如何做我需要做的事情。有人可以帮忙吗？

$modules = 
$('.foo').map(function() {
      return $(this).html();
  }).get().join("<br>");

  alert($modules);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="foo">
    <h5>Text</h5>
    <div class="remove">X</div>
    <img class="image" src="img.png">
</div>
<div class="foo">
    <h5>Text2</h5>
    <div class="remove">X</div>
    <img class="image" src="img2.png">
    <h5>Text3</h5>
    <div class="remove">X</div>
    <img class="image" src="img3.png">
</div>
<div class="foo">
    <h5>Text4</h5>
    <div class="remove">X</div>
    <img class="image" src="img4.png">
</div>

Answer 1

您需要使用.prop()方法获取img标签，如下所示：

.prop('outerHTML');

首先获取带有'.foo img'选择器的图片代码集合，然后获取他们的outerHTML属性。

这是一个解决方案

＆＃13;

＆＃13;

$modules = 
$('.foo img').map(function() {
      return $(this).prop('outerHTML');
  }).get().join("<br>");

  alert($modules);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="foo">
    <h5>Text</h5>
    <div class="remove">X</div>
    <img class="image" src="img.png">
</div>
<div class="foo">
    <h5>Text2</h5>
    <div class="remove">X</div>
    <img class="image" src="img2.png">
    <h5>Text3</h5>
    <div class="remove">X</div>
    <img class="image" src="img3.png">
</div>
<div class="foo">
    <h5>Text4</h5>
    <div class="remove">X</div>
    <img class="image" src="img4.png">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将img添加到选择器：

$modules = 
$('.foo img').map(function() {
  return $(this).html();
}).get().join("<br>");

alert($modules);

Answer 3

您的逻辑问题在于您错过了img标记过滤。

如果您需要元素对它们执行更多操作，您可以使用以下提取方法。

$modules = $('.foo').find('img').map(function() {
      return $(this);
  });

alert($modules.length);

$modules.each(function( index ) {
    alert($(this).attr('src'));
});
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="foo">
    <h5>Text</h5>
    <div class="remove">X</div>
    <img class="image" src="https://findicons.com/files/icons/861/tweet_my_web/128/single_bird.png">
</div>
<div class="foo">
    <h5>Text2</h5>
    <div class="remove">X</div>
    <img class="image" src="img2.png">
    <h5>Text3</h5>
    <div class="remove">X</div>
    <img class="image" src="img3.png">
</div>
<div class="foo">
    <h5>Text4</h5>
    <div class="remove">X</div>
    <img class="image" src="img4.png">
</div>