Получение значения href в глубоко вложенной галерее

У меня возникли проблемы с поиском способов получить значение href для последнего дочернего элемента div. В основном схема такая:

<div id="slider">
    <div id="slide1" class="slides">
       <a href="items/show/1" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide2" class="slides">
       <a href="items/show/2" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide3" class="slides">
       <a href="items/show/3" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide4" class="slides">
       <a href="items/show/4" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide5" class="slides"> 
       <a href="items/show/5" class="link"> <-- trying to get this href value
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
</div>

Я пытаюсь получить значение href последнего брата ".link", но не могу. Укажите мне, где я сделал неправильно, пожалуйста? Пока что вот мой код jQuery:

$(document).ready(function(){

var latestUrl = $(".link").siblings(":last").attr("href");
console.log(latestUrl);
 });

но консоль возвращает: "undefined"

[ОБНОВЛЕНИЕ] Я нашел решение этой проблемы: мне нужно дождаться, пока страница загрузит все, тогда только я могу искать атрибут href последнего дочернего элемента. Этот пример представляет собой галерею изображений, поэтому загрузка занимает довольно много времени, возможно, через секунду после загрузки страницы. Итак, вот код, который устанавливает задержку для скрипта jQuery:

<script type="text/javascript">
window.setTimeout(function(){
alert($('.link:last').attr("href"));
}, 3000);
</script>

Это устанавливает 3-секундную задержку. Спасибо за ваши ответы!


jquery siblings
person Hafiz Hanif    schedule 17.02.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно выбрать последний элемент .slides. Вы можете использовать:

Пример здесь

var latestUrl = $('#slider .slides:last').find('a').attr("href");
console.log(latestUrl);

В качестве альтернативы это тоже сработает:

Пример здесь

var latestUrl = $('a', '#slider .slides:last').attr("href");
console.log(latestUrl);

Хотя использование $('.link:last').attr('href') может работать с учетом предоставленного вами HTML, это не сработает, если вне #slider есть элемент .link. Кроме того, это не гарантирует, что он будет в последнем элементе .slides.

person Josh Crozier    schedule 17.02.2015
comment
Ваш пример работает так, как должен, но я не могу заставить его работать в самом коде. - person Hafiz Hanif; 17.02.2015
comment
ах, моя ошибка. этот фрагмент кода необходимо запустить после завершения загрузки страницы.. поэтому я добавил window.setTimeout(function(){ alert($('.link:last').attr('href')); }, 3000); - person Hafiz Hanif; 17.02.2015

arrow_upward
0
arrow_downward

Должно быть так же просто, как $('.link:last').attr('href')

alert($('.link:last').attr('href'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
    <div id="slide1" class="slides">
       <a href="items/show/1" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide2" class="slides">
       <a href="items/show/2" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide3" class="slides">
       <a href="items/show/3" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide4" class="slides">
       <a href="items/show/4" class="link">
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
    <div id="slide5" class="slides"> 
       <a href="items/show/5" class="link"> <-- trying to get this href value
           <h2>Date</h2>
           <h3>Title</h3>
       </a>
</div>

person j08691    schedule 17.02.2015
comment
Спасибо! это тоже работает, учитывая, что я вставил setTimeout() перед запуском кода. - person Hafiz Hanif; 17.02.2015