jQuery在嵌套divds中选择href值答案

【问题标题】：jQuery select href values in nested divdsjQuery在嵌套divds中选择href值
【发布时间】：2013-11-18 05:37:13
【问题描述】：

虽然我找到了几个选择 href 属性的答案，但它们都不适合我。也许有人可以帮忙。

html如下

<div class="galleryitem">
   <div class="itemlink">
      <a href="page1.html">Page</a>                 
   </div>
   <div class="itemimg">
      <a href="img/test1.png">test1.png</a>                 
   </div>
</div>

<div class="galleryitem">       
   <div class="itemlink">
    <a href="page1.html">Page 1</a>                 
   </div>
   <div class="itemimg">
      <a href="img/test2.png">test2.png</a>                 
   </div>
</div>

现在我想获取 hrefs 中的所有属性值并尝试使用

$('.galleryitem').each(function() {

   var link = $(this).children('itemlink a').attr('href');
   var img = $(this).children(".itemimg a").attr("href");       

   //jQuery("#somediv").append("<a href='" + link + "'><img class='cloudcarousel' src='" + img + "'/></a>");

});

我不知道为什么 link 和 img 是未定义的。甚至 $(this).children('.itemlink a') 都是未定义的。

有人可以帮忙吗？

【问题讨论】：

你把你的代码放在$(document).ready(function(){...})里面了吗？

标签： javascript jquery selection href attr

【解决方案1】：

试试find

$('.galleryitem').each(function() {
    var link = $(this).find('itemlink a').attr('href');
    var img = $(this).find(".itemimg a").attr("href"); 
    //...
})

【讨论】：

你错过了使用 itemlink 的课程。 -1
@gibberish：不知道你的意思
@Johnツ：find和children不一样。请查看儿童文档api.jquery.com/children

【解决方案2】：

您想确定.find() 方法而不是.children，它只获取直接的后代。（您还有一个小错误，错过了itemlink 中的句点）

var link = $(this).find('.itemlink a').attr('href');
var img = $(this).find(".itemimg a").attr("href");

应该为你工作，这是一个小提琴：http://jsfiddle.net/hQeu3/

.children 不起作用的原因是没有与此选择器“.itemlink a”匹配的直接后代。 jQuery 抓取 div（“.itemlink”），然后尝试过滤到选择器，在这种情况下失败。它本质上等于

$(this).children().filter('.itemlink a'); //won't work!

如果你想使用孩子，你可以这样做

$(this).children('.itemlink').children("a").attr('href');

【讨论】：

【解决方案3】：

你可以这样做：

$('.galleryitem').each(function() {

   var link = $('.itemlink > a', this).attr('href');
   var img = $('.itemimg > a', this).attr('href');
});

考虑到.itemlink 和.itemimg 是<a> 元素的直接父级。

【讨论】：