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

这将打印出div 中每个a 中的每个href。

如果你需要阻止链接改变页面，你需要给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 Demo

注意：child selector (el1 > el2) 仅在 el2 是 el1 的直系后代时才有效。因此，至少有一个示例会失败，因为您没有将其与 DOM 树匹配。但是，console.log($('#blogPagination div ul > li a ').attr("href")); 可以找到（仅）第一个锚标记的 href，假设您将其包装在 DOM 就绪处理程序 $(function() { ... }); 中。

children 方法类似，它只会找到直系后代（子代），而不是孙代等。如果你想在特定的 DOM 树下找到 所有 个后代元素，请改用find。

Answer 3

原版 Javascript 解决方案

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

Answer 4

检查您的控制台 - 因为我怀疑有冲突或 javascript 错误导致 jQuery 无法工作。

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

Answer 5

Vannila Javascript 解决方案

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