how to use $.makeArray() with jQuery

Question

Can anyone explain me how to do this, jquery's api is really lacking on this. What is wrong in the following code?

   var arr = $(value).filter(function() { return $(this).is("TD"); } ).html();
   alert(arr[1]);

I just want to grab the innerHTML/text of the td and put it in an array

Answer 1

The html() function, and similar functions like text() and width() return a scalar value for the first matched element.

If you want an array with the HTML contents of every matched element, you should call map(), like this:

var arr = $(value).children('td').map(function() { return $(this).html(); }).get();
alert(arr[0]);   //Alerts HTML of first <td> element

Answer 2

Using .map() with .get() is one way to go:

var arr = $(value).map(function() { 
      var $th = $(this); 
      if($th.is("TD")) return $th.html(); 
}).get();

alert(arr);

I'm not sure what value represents, but if you change the selector to match only td elements, you could simplify the return statement with return $(this).html();.

.map() iterates over the elements, and adds the return value to the jQuery object. .get() retrieves just the array out of the jQuery object.

• http://api.jquery.com/map/
• http://api.jquery.com/get/

---

Sounds like value is a tr. Then you could do this:

var arr = $(value).children('td').map(function() { 
      return  $(this).html(); 
}).get();

alert(arr);

---

To create an array with each item containing an array of that row's td element's html, you could do this:

var arr = [];

$('tr').each(function() { 
    arr.push($(this).children('td').map(function() {
        return $(this).html();
    }));
}).get();

console.log(arr);

This uses the standard .push() since I don't think that using .map() inside .map() would work. I think when you pass the inner array into the jQuery object, it just adds it to the main array (or something).

Answer 3

The .html() function:

Description: Get the HTML contents of the first element in the set of matched elements.

This is true of many jQuery functions that are retrieving values. So what's happening is that your filter function is returning a set of jQuery elements, but your .html() function is causing arr to just be assigned the html from the first element in the set.