Question

我想使用.each和.attr函数来获取div id。我知道如何做到这一点，但我想要做的是从DOM获取每个div ID与某个类（让我们说“编辑”类）和.append一些数据到该div。

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

任何想法，我都是新手，所以你能提供代码示例吗？我在某种程度上理解attr和.each。

Answer 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'));

    });

})();

Answer 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>");

        }
    });
});

Answer 3

我猜。你想要这个吗？

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

Answer 4

我不相信对每个（）的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/

Answer 5

我想我正确地解释了你的条件：

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

使用Jquery.attr（）获取DIV ID

5 个答案: