33

我有一个带有以下 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);
    });
}
});

最后 }）; 代表文件准备完毕。

4

5 回答 5

49 
$('#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在单击时获取链接。

这是你想要的吗？

于 2013-08-11T18:49:07.907 回答
8

您可能正在寻找的功能是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-ready handler 中，则可以找到（仅）第一个锚标记的 href $(function() { ... });。

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

于 2013-08-11T18:56:13.363 回答
2

Vanilla Javascript 解决方案

document.querySelectorAll("div #blogPagination a").forEach((item)=>console.log(item.href));
于 2020-12-19T17:30:12.523 回答
0

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

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

于 2013-08-12T11:01:31.283 回答
0

Vannila Javascript 解决方案

Array.prototype.map.call(document.querySelectorAll(".myselectorAreaofLinks"), function (e) {
  return e.getAttribute('href');
});
于 2020-07-02T02:26:05.790 回答