jQuery - 获取一个 <div> ID 并将其分发给它的孩子答案

【问题标题】：jQuery - Grab a <div> ID and distribute it to its childrenjQuery - 获取一个 <div> ID 并将其分发给它的孩子
【发布时间】：2014-07-21 01:08:51
【问题描述】：

我一直在尝试获取 DIV 的 #id 并使用 jQuery 将其传递给它的每个孩子，但无济于事。

<div class="gallery" id="gallery-1">
    <a href="link_1">Link 1</a>
    <a href="link_2">Link 2</a>
</div>
<div class="gallery" id="gallery-2">
    <a href="link_1">Link 1</a>
    <a href="link_2">Link 2</a>
</div>

变成..

<div class="gallery" id="gallery-1">
    <a ref="gallery-1" href="link_1"><img src="#"/></a>
    <a ref="gallery-1" href="link_2"><img src="#"/></a>
</div>
<div class="gallery" id="gallery-2">
    <a rel="gallery-2" href="link_3"><img src="#"/></a>
    <a rel="gallery-2" href="link_4"><img src="#"/></a>
</div>

我正在使用..

$("div.gallery").each(
    function(){
    var galleryCount = $("div.gallery");    
    $("div a:has(img)").attr( "rel", galleryCount );
    }
);

..但这最终给了我[对象，对象]。看起来它正在计算 div.gallery 并试图将它们都分配给 rel。如何仅获取父 ID 并将其应用于其子代？

【问题讨论】：

好吧，没有足够的绿色复选标记可以在这个页面上使用，所以未来偶然发现这个页面的 n00bs 尝试一切。

标签： jquery variables attr each

【解决方案1】：

正确的做法是：

$("div.gallery").each( function()
{
    var $this = $(this);
    var id = $this.attr('id'); // <-- Get the ID attribute

    $this.children("a").attr("rel", id);
});

这是working example。

【讨论】：

您仍在设置所有as 的rel 属性，而不仅仅是孩子。
感谢您的关注。更新了答案。
这会将第一个画廊 ID 应用于所有链接。 :( 或者至少在我的测试中是这样。编辑：你们很快！
我所包含的工作示例完全符合您的要求。

【解决方案2】：

听起来您想将每个父级的 id 应用于其子级的 rel 属性？试试：

$('.gallery').each(function () {
    $(this).find('a').attr('rel', $(this).attr('id'));
});

这是jsFiddle

【讨论】：

这个也可以，而且这个对我来说更容易阅读。 ..so .find，发现 .gallery 中的内容正确吗？
谢谢！我将不得不开始更多地摆弄它。

【解决方案3】：

使用下面的代码

$(document).ready(function(){
    $(".gallery").each(function(){
        rel = $(this).attr("id");
        $(this).find("a").attr("rel",rel)
    });
});

【讨论】：

有这么多正确的答案，很神奇我没有落入一个。谢谢。

【解决方案4】：

拿children，添加rel-attribute，把内层html改成img。

$(".gallery").children().each(function(){
    $(this).attr("rel", $(this).parent().attr("id"));
    $(this).html("<img src='#'>");
});

输出：

<div class="gallery" id="gallery-1">
    <a ref="gallery-1" href="link_1"><img src="#"/></a>
    <a ref="gallery-1" href="link_2"><img src="#"/></a>
</div>
<div class="gallery" id="gallery-2">
    <a rel="gallery-2" href="link_3"><img src="#"/></a>
    <a rel="gallery-2" href="link_4"><img src="#"/></a>
</div>

【讨论】：

这也有效，尽管在我目前的情况下，如果我不必明确地将每个图像放入 javascript 中会更容易。我的问题不完整。谢谢！

【解决方案5】：

这应该可以工作（未经测试）：

$("div.gallery").each(function(){
    var galleryId = $(this).attr('id');    
    $("a:has(img)", this).attr( "rel", galleryId);
    }
});

【讨论】：

这成功了！你能具体解释一下为什么吗？我明白了.. 使用它选择 div.gallery，并通过 .attr 获取它的 id，但我不清楚它在做什么。
$/jQuery函数的第二个参数是一个上下文。你也可以使用$(this).find('a:has(img)')
看来我得更努力地看书了。谢谢。