Como obter todos os links de uma lista dentro de uma div?
Eu tenho um código com a seguinte árvore de 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>
Estou tentando alcançar o href da minha tag. Eu não posso alcançá-lo com qualquer coisa que eu tentei.
Qual é a melhor maneira de alcançá-lo com jQuery?
Eu tentei:
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"));
sem sorte ..
obrigado
EDITAR:
Depois da resposta de nbrooks, aqui está o que eu tentei até agora:
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:
Considerando a resposta do Syfaro, também tentei:
$('#blogPagination').find('a').each(function(e) {
e.preventDefault();
console.log($(this).attr('href'));
});
Sem sorte.
EDIT 3: Eu gostaria de dar mais detalhes sobre essa função que pode ter um impacto significativo depois de tudo:
para carregar essa paginação, estou usando o Ajax e o handlebars em uma função pronta para o documento:
$(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();
Você pode ver na função get BlogPosts que eu chamo de BindPagination, que deveria ser essa função, para evitar o comportamento padrão e chamar o conteúdo dependendo do deslocamento (sistema de paginação)
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);
});
}
});
o último }); Stand para o final do documento pronto.