如何获取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();

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

最后一个});代表文档结尾已准备好。

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

Answer 3

find

Answer 4

您的陈述是正确的，应该选择您需要的元素。

Answer 5

document.querySelectorAll("div #blogPagination a").forEach((item)=>console.log(item.href));

Answer 6

Array.prototype.map.call(document.querySelectorAll(".myselectorAreaofLinks"), function (e) {
  return e.getAttribute('href');
});

方法是

jQuery

提供的方法，允许您选择具有特定后代元素的元素。要选择 .has() 内包含锚标记的链接，然后检索这些标记，我们可以使用此方法。下面是实现相同目的的示例。div

此示例首先借助 

$('div:has(a)').find('a').each(function() {
    $(this).css('color', 'red');
});

选择器选择所有包含锚标记的 div。之后，它在每个

:has()

元素上调用

find()

方法，以检索作为其后代的所有锚标记。最后，

div

方法用于迭代每个链接以添加或更改样式，或执行任何其他操作。