Extracting list data in jQuery

Question

Dear all I am using jQuery, I have little doubt of how to Extract list data effectively?

My List having

<li class="add"><a href="#">Data1</a></li>
<li class="add"><a href="#">Data2</a> </li>
 ...

My JQuery has

$(".add").click(function(e){
       e.preventDefault();
       // Here is to get the Value of Data1 and data2 ..
       // How to alert Data1,Data2 effectively  

     });

Answer 1

You can try the following:

$('.add').click(function(e) {
  e.preventDefault();

  // Initialize an array for all texts
  var data = [];

  // For each <li> with class 'add'...
  $('li.add').each(function() {
    // ...append the element's text to the data array
    data.push($(this).text());
  });

  // Just for testing: Alert the array as a string
  alert(data.join(','));
});

Answer 2

I'd say:

$('.add').click( function(e){
 e.preventDefault();
 data = [];
 //loop over each li:
 $('li.add').each( function() {
  //Get the a and the text contents of that
  data.push($(this).find('a').text());
 }
 alert(data.join(','));
}

This is a slight variation on Ferdinand's answer.

Answer 3

or just

  $('li.add a').each(function() {
    data.push($(this).text());
  });

Answer 4

If it's any consilation, I did something like this recently for a project. I wanted to have it to where you could search the information and highlight text in the page. But I wanted to do it against the data itself (meaning not to hit the HTML each time)

http://www.ffin.com/onlinebankingfaq

If you look at the javascript, you can see how I setup the data, which may help you