Potrzebuję tylko tagów obrazów w. Jeszcze, nie wszystkie HTML. Bawiłem się z filtrem (), dzieci (), znajdź () i po prostu nie wiem, jak robić to, czego potrzebuję. Czy ktoś może pomóc?

$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>
0
crinkledMap 4 czerwiec 2018, 20:57

3 odpowiedzi

Najlepsza odpowiedź

Musisz użyć metody .prop(), aby uzyskać same znaczniki IMG zgodnie z następującymi:

.prop('outerHTML');

Najpierw zdobądź kolekcję znaczników obrazu z selektorem '.foo img', a następnie weź ich outerHTML nieruchomość.

Oto rozwiązanie

$modules = 
$('.foo img').map(function() {
      return $(this).prop('outerHTML');
  }).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>
2
Banzay 5 czerwiec 2018, 04:03

Możesz dodać img do selektora:

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

alert($modules);
1
mpallansch 4 czerwiec 2018, 18:00

Problem z logiką jest to, że przegapiłeś, aby wspomnieć o filtrze znacznika img.

W przypadku, gdy potrzebujesz elementów, aby wykonać więcej operacji, możesz użyć poniższej metodologii ekstrakcji.

$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>
0
prime 4 czerwiec 2018, 20:13