如何获取列表内的所有链接？ [英] How to get all the links of a list inside a div?

问题描述

我有一个包含以下DOM树的代码：

I have a code with the following DOM Tree:

<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。

I'm trying to reach the href of my tag. I can't reach it with anything I tried.

使用jQuery达到最佳方法是什么？

What's the best way to reach it with jQuery ?

我试过：

console.log（$（'＃blogPagination div ul> li a'）。 attr（href））;

console.log（$（'＃blogPagination> a'） .attr（href））;

$（'＃blogPagination'）。 ）

console.log（$（'＃blogPagination div ul li a'）。attr（href ））;

没有运气..

感谢

编辑：

在nbrooks的回答之后，这里是我迄今为止所尝试的：

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

编辑2：

考虑到Syfaro的答案，我也试过：

Considering Syfaro's answer, I've also tried :

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

没有运气。

编辑3：
我想提供更多有关此功能的详细信息，这些功能可能会产生重大影响：

EDIT 3 : I'd like to give more details concerning this function that may have a significant impact after all:

加载此分页，我使用Ajax和把手包装成一个文档就绪功能：

to load this pagination, I'm using Ajax and handlebars wrapped into a document ready function:

$(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，这应该是这个功能，阻止默认行为并根据偏移量调用内容（分页系统）

You can see in the get BlogPosts function that I call BindPagination which is supposed to be this function, to prevent default behavior and call the content depending of the offset (pagination system)

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

最后一个}）;

推荐答案

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

这应该会查找所有 a 指定区域，得到它们的 href ，假设你已经有jQuery和所有好的东西设置了。

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.

如果您有多个 a 元素，则可以执行以下操作：

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

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

这将打印出每个 href a div 。

如果您需要阻止链接更改页面，您需要向 a 元素添加点击处理程序。

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'));
});

这将阻止用户被带到链接，并获得 href 的链接点击。

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

这是你想要的吗？

这篇关于如何获取列表内的所有链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！