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

運がなければ。

EDIT 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場合にのみ機能します。したがって、DOM ツリーと一致しなかったため、少なくとも 1 つの例が失敗したことになります。ただし、DOM 対応の handler でラップすると仮定すると、最初のアンカー タグ (のみ) の href を見つけることができます。el2el1console.log($('#blogPagination div ul > li a ').attr("href"));$(function() { ... });

メソッドは、直接の子孫 (子) のみを検索し、孫などを検索しないというchildren点で似ています。特定の要素の DOM ツリーの下にあるすべてのfind子孫を検索する場合は、代わりに を使用します。

于 2013-08-11T18:56:13.363 に答える
0

コンソールを確認してください - jQuery が機能しない原因となっている競合または JavaScript エラーがあると思われます。

ステートメントは正しく、必要な要素を選択する必要があります。

于 2013-08-12T11:01:31.283 に答える