Как получить все ссылки списка внутри div?
У меня есть код со следующим деревом 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"));
без везения..
Спасибо
EDIT:
После ответа 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);
});
}
});
последний}); Подготовьте конец документа.
Ответы
Ответ 1
$('#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
ссылки при нажатии.
Это то, что вы хотите?
Ответ 2
Функция, которую вы, вероятно, ищете, map
. Это позволяет вам взять определенную коллекцию jQuery и преобразовать ее, взяв определенное свойство каждого объекта и сделав это элементом в полученной коллекции.
Чтобы собрать все href в вашем массиве:
$(function() {
var links = $("#blogPagination ul a").map(function() {
return this.href;
}).get();
console.log(links);
});
jsFiddle Demo
Примечание. дочерний селектор (el1 > el2
) работает только тогда, когда el2
является прямым потомком el1
. Таким образом, по крайней мере один из ваших примеров потерпел бы неудачу, потому что вы не соответствовали этому с вашим деревом DOM. Тем не менее, console.log($('#blogPagination div ul > li a ').attr("href"));
будет работать, чтобы найти href (только) самого первого тега привязки, предполагая, что вы завернули его в обработчик DOM-ready $(function() { ... });
.
Метод children
похож на то, что он найдет только прямых потомков (детей), а не внуков и т.д. Если вы хотите найти всех потомков в дереве DOM определенного элемента, вместо этого используйте find
.
Ответ 3
Проверьте свою консоль - поскольку я подозреваю, что есть ошибка конфликта или javascript, из-за которой jQuery не работает.
Ваши утверждения верны и должны выбрать требуемый элемент.