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的{{1}}个。{/ p>

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

这样可以防止用户被带到该链接，并在点击时获取该链接的$('#blogPagination').on('click', 'a', function(e) { e.preventDefault(); console.log($(this).attr('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-ready处理程序$(function() { ... });中。

children方法类似，因为它只能找到直接后代（子），而不是孙子等。如果你想在DOM树中找到所有后代一个特定的元素，改为使用find。

Answer 3

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

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

5 个答案: