web-dev-qa-db-fra.com

Comment obtenir tous les liens d'une liste dans une div?

J'ai un code avec l'arborescence DOM suivante:

<div id="blogPagination">
    <div class="pagination">
        <ul>
            <li>
                <a href="/2" >1</a>
            </li>
            <li>
                <a href="/3" >2</a>
            </li>
        </ul>
    </div>
</div>

J'essaie d'atteindre le href de mon tag. Je ne peux pas l'atteindre avec tout ce que j'ai essayé.

Quelle est la meilleure façon de l'atteindre avec jQuery?

J'ai essayé:

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"));

sans chance ..

Merci

MODIFIER:

Après la réponse de nbrooks, voici ce que j'ai essayé jusqu'à présent:

function bindPagination() {

    console.log("bind");

    $(function() {
        var links = $("#blogPagination ul a").map(function(e) {
        e.preventDefault();
            return this.href;
        }).get();
        console.log(links);
});

EDIT 2:

Compte tenu de la réponse de Syfaro, j'ai également essayé:

$('#blogPagination').find('a').each(function(e) {
    e.preventDefault();
    console.log($(this).attr('href'));
});

Sans chance.

EDIT 3: Je voudrais donner plus de détails sur cette fonction qui peut avoir un impact significatif après tout:

pour charger cette pagination, j'utilise Ajax et un guidon intégré dans une fonction de préparation de document:

$(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();

Vous pouvez voir dans la fonction get BlogPosts que j'appelle BindPagination, qui est supposée être cette fonction, pour empêcher le comportement par défaut et appeler le contenu en fonction de l'offset (système de pagination).

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

le dernier }); se tenir à la fin du document prêt.

jqueryhtmldom
28
Miles M.
$('#blogPagination').find('a').attr('href');

Cela devrait trouver tous les éléments a dans la zone spécifiée, en obtenir la href, en supposant que vous avez déjà jQuery et tout ce qui est bien configuré.

Si vous avez plusieurs éléments a, vous pouvez faire quelque chose comme ceci:

$('#blogPagination').find('a').each(function() {
    console.log($(this).attr('href'));
});

Ceci affichera chaque href de chaque a dans cette div.

Si vous devez empêcher le lien de changer de page, vous devez ajouter un gestionnaire de clic aux éléments a.

$('#blogPagination').on('click', 'a', function(e) {
    e.preventDefault();
    console.log($(this).attr('href'));
});

Cela empêchera l'utilisateur d'être amené au lien et d'obtenir la href du lien lorsque l'utilisateur clique dessus.

C'est ce que tu veux?

39
ixchi

La fonction que vous recherchez probablement est map . Cela vous permet de prendre une collection donnée jQuery et de la transformer en prenant une propriété spécifique de chaque objet et en faisant cet élément de la collection résultante.

Pour collecter tous les href de votre tableau:

$(function() {
    var links = $("#blogPagination ul a").map(function() {
        return this.href;
    }).get();
    console.log(links);
});

jsFiddle Demo

Remarque: Le sélecteur d'enfant (el1 > el2) ne fonctionne que lorsque el2 est bien un descendant direct de el1. Ainsi, au moins un de vos exemples aurait échoué car vous ne correspondiez pas à cela avec votre arborescence DOM. Cependant, console.log($('#blogPagination div ul > li a ').attr("href")); fonctionnerait pour trouver le href de (uniquement) la toute première balise d'ancrage, en supposant que vous l'ayez enveloppé dans un gestionnaire $(function() { ... }); prêt pour le DOM.

La méthode children est similaire, en ce sens qu'elle ne trouvera que les descendants directs (enfants), pas les petits-enfants, etc. Si vous souhaitez rechercher tous les descendants dans l'arborescence DOM d'un élément particulier, utilisez find à la place.

7
nbrooks

Vérifiez votre console - car je soupçonne qu'il existe un conflit ou une erreur javascript qui empêche jQuery de fonctionner. 

Vos déclarations sont correctes et doivent sélectionner l’élément souhaité. 

0
andy