如何在div中获取列表的所有链接？

Question

我有一个代码与以下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"));

没有运气..

谢谢

编辑:

在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();

您可以在获取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);
    });
}
});

最后 }); 代表文件的结尾准备就绪.

Answer 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在单击时获取链接.

这是你想要的吗？

Answer 2

您可能正在寻找的功能是map.这允许您获取给定的jQuery集合并通过获取每个对象的特定属性并将其作为结果集合中的元素来对其进行转换.

收集数组中的所有href:

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

jsFiddle演示

注:该子选择器(el1 > el2),只有当工作el2是,好了,直接后裔el1.因此,至少有一个示例会失败,因为您与DOM树不匹配.但是,console.log($('#blogPagination div ul > li a ').attr("href"));假设您将它包装在一个支持DOM的处理程序中,那么就可以找到(仅)第一个锚标记的href $(function() { ... });.

该children方法类似,因为它只能找到直接后代(子),而不是孙子等.如果要在特定元素的DOM树中找到所有后代,请find改用.