使用 Jquery.attr() 获取 DIV ID答案

【问题标题】：Using Jquery.attr() to Get DIV IDs使用 Jquery.attr() 获取 DIV ID
【发布时间】：2011-12-10 09:18:29
【问题描述】：

我想使用 .each 和 .attr 函数来获取 div id。我知道该怎么做，但我想做的是从 DOM 中获取具有特定类（比如说“编辑”类）的每个 div ID，并将一些数据附加到该 div 中。

这就是我遇到的问题：我想将该特定 DIV 的 ID 放在 .append 内的 .each 循环中。例如：如果我想在 .append 中放置一个链接，我希望链接是 http://www.website.com/index.php?id=1&div=DIV-ID

任何想法，我是一个新手，所以你可以提供代码示例。我在一定程度上理解 attr 和 .each。

【问题讨论】：

“我想把特定 DIV 的 ID 放在 .append 内的 .each 循环中。” - 等等……什么？
这个问题没有多大意义。您能否解释您期望的输入并逐步引导我们完成您想要发生的事情？我怀疑你想要什么是可行的，但目前很难猜出你想要什么。
他的问题很有道理。他希望
属性作为链接的一部分在同一个 div 中结束。他甚至发布了一些他尝试过的方法（即 .each 和 .attr），所以他显然研究了一些东西。他只是需要帮助把它放在一起。
感谢 Morgan，我已经对 .each 和 .append 进行了研究，并让它们显示所有 div，而不仅仅是特定的 div。我相信下面的答案有所帮助。
@Morgan 我在上面的评论中引用的这句话远没有意义。不清楚被问到什么。

标签： php jquery html each attr

【解决方案1】：

http://jsfiddle.net/WrGLC/1/

为了将其保留在此页面上：

HTML：

<div id="1" class="edit">A</div>
<div id="2" class="edit">B</div>
<div id="3">C</div>

JS：

// Anonymous loop, in case you copy and paste this script, the vars won't get confused
(function() {

    // Loop for each .edit
    $('.edit').each(function() {

        // Update the text inside
        $(this).html('http://www.website.com/id='+$(this).attr('id'));

    });

})();

【讨论】：

感谢摩根，这看起来像我要找的东西。感谢您的帮助！
NP。更改 html() 参数。它可以是现有对象，或者如果您正在动态创建它，您可以执行类似 $(this).html('');
感谢您的洞察力。我实际上想将带有 div id 的 href 放在我的图像周围，但我通过一些快速测试找到了它。不过谢谢，我可能也需要知道这些信息！

【解决方案2】：

这是一个未经测试的解决方案，看起来应该可以工作。如果有多个类分配给div 元素，它可能不起作用。

$(function() {
    $('div').each(function() {
        var _t = $(this);
        var id = _t.attr("id");
        if(_t.attr("class") == "someClass") {
            _t.append("<a href = 'http://www.website.com/index.php?id=1&div="+id+"'>Hello World!</a>");

        }
    });
});

【讨论】：

【解决方案3】：

我猜。你想要这个吗？

$( '.edit' ).append( function () {
    return '<a href="http://www.website.com/index.php?id=1&div=' + 
        this.id + '">link</a>';
});

【讨论】：

【解决方案4】：

我认为我正确地解释了你的情况：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="a" class="edit">A</div>
        <div id="b" class="edit">B</div>
        <div id="c">C</div>
        <div id="d" class="save">D</div>
        <div id="e" class="edit">E</div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            (function ($) {
                $("div.edit").each(function (i) {
                    var $div = $(this);
                    $div.append('<a href="http://www.website.com/index.php?id=1&div=' + $div.attr("id") + '">Link</a>');
                });
            })(jQuery);
        </script>
    </body>
</html>

更新： @JohnHartsock 是正确的。这里不需要每种方法。我会按如下方式调整我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="a" class="edit">A</div>
        <div id="b" class="edit">B</div>
        <div id="c">C</div>
        <div id="d" class="save">D</div>
        <div id="e" class="edit">E</div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            (function ($) {
                $("div.edit").append(function () {
                    var $div = $(this);
                    $div.append('<a href="http://www.website.com/index.php?id=1&div=' + $div.attr("id") + '">Link</a>');
                });
            })(jQuery);
        </script>
    </body>
</html>

【讨论】：

你的意思是把 (i) 放在功能之后，还是你的意思是 (id)？

【解决方案5】：

我认为没有必要对 each() 进行 jQuery 调用。使用append()，您可以传递一个函数，该函数将代表您的选择器的当前迭代。

$('div.mydivclass').append(function () {
  return '<a href="http://www.website.com/index.php?id=1&div='+ this.id + '">My Div link</a>';
});

这是一个小提琴http://jsfiddle.net/WFd7k/

【讨论】：