7 Replies - 11592 Views - Last Post: 01 September 2012 - 04:24 PM

#1 pnsrinivasreddy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-August 12

how to store all img tags in an array using jquery

Posted 29 August 2012 - 01:30 AM

Hi,

I have table in a div which contains lot of html elements like this.

    <div id="result">
    <table>
      <tbody>
        <tr>
      <td><img src="images/a.gif" /></td>
      <td><p>sample text</p></td>
    </tr>
     <tr>
      <td><a href="b.gif" /></td>
      <td><p>sample text <img src="images/c.gif" /></p></td>
    </tr>
     <tr>
      <td><p>TEXT</p></td>
      <td><p><img src="images/D.gif" /></p></td>
    </tr>
  </tbody>
</table>
</div>


Now I want to find all the "img" tags in the table and then to store in an array. I am trying with the following code.

    var imagesArray = $("#result").find("img").map(function() 
    {
    return $(this).html();
    }).get();


I know its wrong with the img tags But I have used the same code to load all the table elements in a div. Its not working with img tags. I know its because the image tag doesn't contain any text. So please guide me how can I store all img tags in an array.

all I need is like this:

 imagesArray = ["<img src="images/a.gif" />","<img src="images/b.gif" />","<img src="images/c.gif" />","<img src="images/d.gif" />"]


MOD EDIT: Added code tags and moved to jQuery. Qhen posting code...USE CODE TAGS!!!

:code:

This post has been edited by JackOfAllTrades: 29 August 2012 - 03:42 AM


Is This A Good Question/Topic? 0
  • +

Replies To: how to store all img tags in an array using jquery

#2 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: how to store all img tags in an array using jquery

Posted 29 August 2012 - 09:57 AM

hmmm... perhaps I don't really understand the querstion, butsimple jquery selector returns an array.
var imgs = $("img");


here is a fiddle:
http://jsfiddle.net/HzPP7/
Was This Post Helpful? 0
  • +
  • -

#3 pnsrinivasreddy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-August 12

Re: how to store all img tags in an array using jquery

Posted 30 August 2012 - 03:47 AM

Thanks so much for your reply. All I need is to store those "img" tags in an array. I am really not sure about the way how to grab those img tags from the div to array. I tried using jquery "map" and "filter" still could not do it. guide me how to obtain the below array.

imagesArray = ["<img src="images/a.gif" />","<img src="images/b.gif" />","<img src="images/c.gif" />","<img src="images/d.gif" />"]

Thanks so much again

-Srinu
Was This Post Helpful? 0
  • +
  • -

#4 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: how to store all img tags in an array using jquery

Posted 31 August 2012 - 09:15 AM

well that was the answer.
jquery selectors return an array of all the selected elements.
so just specify your selector, and assign the array to a variable.
Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: how to store all img tags in an array using jquery

Posted 31 August 2012 - 03:44 PM

Getting an elements outer HTML is notoriously difficult, since there isn't proper cross-browser support for the .outerHtml statement, this time Firefox being the main culprit (it doesn't support .outerHtml until v11)

One solution is to use the .each() iterative function to loop through your elements, then clone each one, wrap it in a tag, and get the inner html of that tag. Sounds convoluted, I know, but it's a sure-fire way of picking up the entire img HTML. Don't worry about cloning - it doesn't produce an identical element in your document. Unless you actually attach it to the HTML of the document, it simply exists as a jQuery object with no context to your document body.
var a = [];
var imagesArray = $("#result").find("img").each(function(index) 
{
    a[i] = $(this).clone().wrap('<p>').parent().html();
});


So you can see I've created a loop to loop through your selector $("#result").find("img"). With each element, we create a clone, wrap that clone in paragraph tags, select the parent (i.e. - the paragraph tags) and get the innerHTML of that. Et voila, img tag HTML.

You can, alternately, use the .map() function, but really, that function is for transforming the elements of an array, rather than iterating through them for some other purpose.

This post has been edited by e_i_pi: 31 August 2012 - 03:45 PM

Was This Post Helpful? 2
  • +
  • -

#6 pnsrinivasreddy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-August 12

Re: how to store all img tags in an array using jquery

Posted 01 September 2012 - 09:47 AM

awesome!! its done. The only thing is the attributes of the original outer html (img tags) were shuffled.

Original outerhtml: <img src="a.gif" height="131" alt="test" style="border: 0; display: block;" width="501" />
After cloning - in FF: <img src="a.gif" alt="test" style="border: 0; display: block;" height="131" width="501">
After cloning - in IE: <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; DISPLAY: block; BORDER-TOP: 0px; BORDER-RIGHT: 0px" alt="test" src="a.gif" width=501 height=131>

Please let me know if is there is anyway that we can get original outerhtml.

Thanks so much. Thousand smiles:):)

-srinu
Was This Post Helpful? 0
  • +
  • -

#7 pnsrinivasreddy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 29-August 12

Re: how to store all img tags in an array using jquery

Posted 01 September 2012 - 10:00 AM

sorry!! sorry!! sorry!!

All is well.. Everything is working fine. Thnx so much again

Million smiles :bigsmile: :bigsmile: :bigsmile:

-Srinu
Was This Post Helpful? 0
  • +
  • -

#8 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: how to store all img tags in an array using jquery

Posted 01 September 2012 - 04:24 PM

Since .html() uses the browser's innerHTML property, the results can vary, but will always be relevant to the client's browser. If you need to get the server-side generated HTML, I would suggest assigning the HTML values directly to a JS array during output processing.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1