Question

I’m trying to use jquery to grab the entire link depending on it’s class.

Here’s my code:

<ul class="vm_catTigra">
  <li><a class="mainlevel" href="/index.php&amp;category_id=6">AAAAA</a></li>
  <li><a class="mainlevel" href="/index.php&amp;category_id=10">BBBBB</a></li>
  <li><a class="sublevel" href="/index.php&amp;category_id=11">CCCCC</a></li>
  <li><a class="sublevel" href="/index.php&amp;category_id=12">DDDDD</a></li>
  <li><a class="mainlevel" href="/index.php&amp;category_id=13">EEEEE</a></li>
</ul>

Here’s what I want jquery to grab for me (in an array):

<a class="mainlevel" href="/index.php&amp;category_id=6">AAAAA</a>
<a class="mainlevel" href="/index.php&amp;category_id=10">BBBBB</a>
<a class="mainlevel" href="/index.php&amp;category_id=13">EEEEE</a>

I have tried using this:

var mainlevel = [];
jQuery(".mainlevel").each(function() { 
  mainlevel.push(jQuery(this).html());
});

But it is returing AAAAA, BBBBB, EEEEE instead of the full line of code that I’m after.

Answer 1

You can do it using .map() and .html() like this:

var linkArray = $("a.mainlevel").map(function() {
    return $(this).parent().html();
}).get()​​​​​​;

You can view a working demo here, the .get() on the end makes it so you get the native array object at the end…this will result in a 3 string array like your question 🙂