如何从 Javascript 中的 html 标签中检索信息？

Question

I am trying to pull certain item IDs based on if they have an image tag or not. For a given input like the one below:

<div id="ID_1">
     <p><img src="image4.png"></p>
</div>

<div id="ID_2">
</div>

<div id="ID_3">
     <p><img src="image6.png"></p>
</div>

<div id="ID_4">
     <p><img src="image4.png"></p>
</div>

I could get something like:

ID_1: image4.png
ID_2:
ID_3: image6.png
ID_4: image4.png

I am not too familiar with HTML or Javascript, so any help or resources that someone may have or know will be greatly appreciated.

Answer 1

I would recommend using jQuery for something like this (dont forget to include jquery in the html head)

Html =>

<div id="divContainer" >
<div id="ID_1">
     <p><img src="image4.png"></p>
</div>

<div id="ID_2">
</div>

<div id="ID_3">
     <p><img src="image6.png"></p>
</div>

<div id="ID_4">
     <p><img src="image4.png"></p>
</div>
</div>

Javascript =>

const doesContainImg = [];

$(".divContainer div").each(function() {
    // check for an img 
    if ($(this).find("img").length) {
      // store id in array that contains ids that have imgs
      doesContainImg.push($(this).attr("id"));
   }
});

that should work, if it does not let me know!

Answer 2

Add a class on those div. Let's say you have the class "image-div".

We can use this class to see if the divs contain an image or not.

JQUERY:

$(".image-div").each(function(){
    if($(this).find('img').length){
       //if this div contains an image do something.
    }
});

You can attach this code to an event and use it