在深度嵌套的图库中获取 href 值

Question

我无法找到获取 div 最后一个子项的 href 值的方法。基本上，布局是这样的：

<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>

我正在尝试获取“.link”的最后一个兄弟的 href 值，但我做不到。请指出我哪里做错了？到目前为止，这是我的 jQuery 代码：

$(document).ready(function(){

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

但是控制台returns："undefined"

[更新] 我找到了解决方法：我需要等到页面加载所有内容，然后我才能查找最后一个子项的 href 属性。此示例是图片库，因此加载需要相当长的时间，可能在页面加载后一秒钟。所以这里是为 jQuery 脚本设置延迟的代码：

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

这设置了 3 秒的延迟。感谢您的回答！

Answer 1

您需要 select 最后一个 .slides 元素。您可以使用：

Example Here

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

或者，这也行得通：

Example Here

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

虽然根据您提供的 HTML 使用 $('.link:last').attr('href') 可能有效，但如果 #slider 之外有 .link 元素，则它不会有效。此外，它不保证它会在最后一个 .slides 元素中。

Answer 2

应该和$('.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>

在深度嵌套的图库中获取 href 值

Getting href value in a deeply nested gallery

jquery

siblings