JQuery, output a comma separated list in CSV format

Question

I am learning JQuery and I am having trouble trying to write code which outputs a comma separated list in a CSV format from HTML code. I am trying to put the the titles of the images in a comma separated list.

Here is the HTML I am using:

<html>
   <head>
   </head>
   <body>
      <img src="/images/title.jpg" title="TITLE IMAGE" />
      <div id="brand-container">
         <div class="xyz">
            <img src="/images/brand1.jpg" title="Adidas" />
            <img src="/images/brand2.jpg" title="Dr Martens" />
            <img src="/images/brand3.jpg" title="Fred Perry" />
            <img src="/images/brand4.jpg" title="Lacoste" />
         </div>
      </div>
      <div class="xyz">
         <img src="/images/other.jpg" title="OTHER IMAGE" />
      </div>
   </body>
</html>

The following JQuery code is what I have tried to use.

var title = $(':').map(function() { 
    return this.value; 
}).get().join(',');

This is very vague, can you please post the data source and what you have tried so far? — Eric Herlitz
– Eric Herlitz, Commented Jul 26, 2015 at 9:09
Sorry for being vague, I have edited the post with some code that I have tried. — Sulaco-Lv223
– Sulaco-Lv223, Commented Jul 26, 2015 at 9:14

Kamil Szymański · Accepted Answer · 2015-07-26 09:31:06Z

1

Here's a simple snippet, that may help you. What you should do is to store all the elements in a variable, then iterate trough it storing the title string in some kind of object/array. Then simply stringify the results. I hope it will help you a little.

var images = $('.xyz > img'),
  results = [],
  textarea = $('#csv');
$.each(images, function() {
  results.push($(this).prop('title'));
});
textarea.text(results.join());

#csv {
  height: 100px;
  width: 400px;
  padding: 5px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/images/title.jpg" title="TITLE IMAGE" />
<div id="brand-container">
  <div class="xyz">
    <img src="/images/brand1.jpg" title="Adidas" />
    <img src="/images/brand2.jpg" title="Dr Martens" />
    <img src="/images/brand3.jpg" title="Fred Perry" />
    <img src="/images/brand4.jpg" title="Lacoste" />
  </div>
</div>
<div class="xyz">
  <img src="/images/other.jpg" title="OTHER IMAGE" />
</div>

<textarea id="csv"></textarea>

answered Jul 26, 2015 at 9:31

Kamil Szymański

96012 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sulaco-Lv223 Over a year ago

Thank you, it makes perfect sense.

idailylife · Accepted Answer · 2015-07-26 09:43:26Z

0

Do you mean to output all the image titles in your page?

The title attribute in an img object is referred by $('#???').title
To return all image objects, use $('img'). Use $('#brand-container img') instead if you want to output titles within div brand-container;

So that's the answer:

var title = $('img').map(function() {return this.title; }).get().join(',');

return "TITLE IMAGE,Adidas,Dr Martens,Fred Perry,Lacoste,OTHER IMAGE"

edited Jul 26, 2015 at 9:43

answered Jul 26, 2015 at 9:35

idailylife

1842 silver badges14 bronze badges

Collectives™ on Stack Overflow

JQuery, output a comma separated list in CSV format

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related