How to get all the links of a list inside a div?

Question

I have a code with the following DOM Tree: ```

1
2

``` I'm trying to reach the href of my tag. I can't reach it with anything I tried. What's the best way to reach it with jQuery ? I tried: `console.log($('#blogPagination div ul > li a ').attr("href"));` `console.log($('#blogPagination > a ').attr("href"));` `$('#blogPagination').children('a') ` `console.log($('#blogPagination div ul li a').attr("href"));` without luck .. Thanks EDIT: After nbrooks's answer, here is what I tried so far: ``` function bindPagination() { console.log("bind"); $(function() { var links = $("#blogPagination ul a").map(function(e) { e.preventDefault(); return this.href; }).get(); console.log(links); }); ``` EDIT 2 : Considering Syfaro's answer, I've also tried : ``` $('#blogPagination').find('a').each(function(e) { e.preventDefault(); console.log($(this).attr('href')); }); ```…

Accepted Answer

```
$('#blogPagination').find('a').attr('href');
```

This should find all `a` elements in the specified area, the get the `href` of them, assuming that you've already got jQuery and all that good stuff set up.

If you have multiple `a` elements, you could do something like this:

```
$('#blogPagination').find('a').each(function() {
    console.log($(this).attr('href'));
});
```

This will print out each `href` of each `a` in that `div`.

If you need to prevent the link from changing the page, you need to add a click handler to the `a` elements.

```
$('#blogPagination').on('click', 'a', function(e) {
    e.preventDefault();
    console.log($(this).attr('href'));
});
```

This will prevent the user from being taken to the link, and get the `href` of the link when clicked.

Is this what you want?

How to get all the links of a list inside a div?

Solution

Problem