Как получить все ссылки списка внутри div?

У меня есть код со следующим деревом DOM:

<div id="blogPagination">
    <div class="pagination">
        <ul>
            <li>
                <a href="/2" >1</a>
            </li>
            <li>
                <a href="/3" >2</a>
            </li>
        </ul>
    </div>
</div>

Я пытаюсь добраться до href моего тега. Я не могу дотянуться ни с чем, что пытался.

Какой лучший способ достичь этого с помощью jQuery?

Я пробовал:

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"));

без везения..

Спасибо

EDIT:

После ответа nbrooks вот что я пробовал до сих пор:

function bindPagination() {

    console.log("bind");

    $(function() {
        var links = $("#blogPagination ul a").map(function(e) {
        e.preventDefault();
            return this.href;
        }).get();
        console.log(links);
});

ИЗМЕНИТЬ 2:

Учитывая ответ Syfaro, я также пробовал:

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

Без везения.

ИЗМЕНИТЬ 3: Я хотел бы дать более подробную информацию об этой функции, которая может оказать существенное влияние:

чтобы загрузить эту разбивку на страницы, я использую Ajax и рули, завернутые в функцию готовности документа:

$(document).ready(function(){

    // Get the customer service stats
    var Content = {

    init: function() {

            /* this.getHomePosts(); */
            this.getBlogPosts();
        },

    getBlogPosts: function(offset) {
        if(offset == undefined){
            offset = 0;
        }
        // GET the events with JSON
        $.ajax({
            type: "POST",
            data: {},
            url: site_url+"/main/blog/"+offset,
            dataType: "json",
            success: function(results) {
                posts = results["posts"].map(function (blogContent) {
                    if( blogContent.picture != '' ) {
                        return {
                            Title: blogContent.title ,
                            Picture: Content.urlPostPic + blogContent.picture ,
                            Video: '' ,
                            Text: blogContent.text ,
                            Datetime: blogContent.datetime ,
                        }
                    } else {
                        return {
                            Title: blogContent.title ,
                            Picture: '' ,
                            Video: blogContent.video ,
                            Text: blogContent.text ,
                            Datetime: blogContent.datetime ,
                        }
                    }
                });

                pagination = {pagination: results["pagination"]};

                var template = Handlebars.compile( $('#templateBlog').html() );
                $('#blogPosts').append( template(posts) );

                var template = Handlebars.compile( $('#templatePagi').html() );
                $('#blogPagination').append( template(pagination) );
                                    // Here we call bindPagination <===
                bindPagination();
            }
        });
    },

};

Content.init();

Вы можете увидеть в функции Get BlogPosts, которую я называю BindPagination, которая должна быть этой функцией, чтобы предотвратить поведение по умолчанию и вызывать контент в зависимости от смещения (система разбиения на страницы)

function bindPagination() {

    console.log("bind");


    var links = $("#blogPagination ul a").map(function(e) {
        e.preventDefault();
        return this.href;
    }).get();
    console.log(links);

    $('#blogPagination').find('a').each(function(e) {
        console.log("clicked !");
        e.preventDefault();
        console.log($(this).attr('href'));

     //    var attr = this.attr();
        // var id = attr.replace("/","");

        // $('#blogPosts').empty();
        // $('#blogPagination').empty();
        // Content.getBlogPosts(id);
    });
}
});

последний}); Подготовьте конец документа.

Ответ 1

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

Это должно найти все элементы a в указанной области, получить из них href, предположив, что у вас уже есть jQuery и все, что было создано.

Если у вас несколько элементов a, вы можете сделать что-то вроде этого:

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

Это будет печатать каждый href каждого a тем, что div.

Если вам нужно предотвратить изменение ссылки на странице, вам нужно добавить обработчик кликов к элементам a.

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

Это не позволит пользователю перейти к ссылке и получить href ссылки при нажатии.

Это то, что вы хотите?

Ответ 2

Функция, которую вы, вероятно, ищете, map. Это позволяет вам взять определенную коллекцию jQuery и преобразовать ее, взяв определенное свойство каждого объекта и сделав это элементом в полученной коллекции.

Чтобы собрать все href в вашем массиве:

$(function() {
    var links = $("#blogPagination ul a").map(function() {
        return this.href;
    }).get();
    console.log(links);
});

jsFiddle Demo

Примечание. дочерний селектор (el1 > el2) работает только тогда, когда el2 является прямым потомком el1. Таким образом, по крайней мере один из ваших примеров потерпел бы неудачу, потому что вы не соответствовали этому с вашим деревом DOM. Тем не менее, console.log($('#blogPagination div ul > li a ').attr("href")); будет работать, чтобы найти href (только) самого первого тега привязки, предполагая, что вы завернули его в обработчик DOM-ready $(function() { ... });.

Метод children похож на то, что он найдет только прямых потомков (детей), а не внуков и т.д. Если вы хотите найти всех потомков в дереве DOM определенного элемента, вместо этого используйте find.

Ответ 3

Проверьте свою консоль - поскольку я подозреваю, что есть ошибка конфликта или javascript, из-за которой jQuery не работает.

Ваши утверждения верны и должны выбрать требуемый элемент.