Question

？嗨！

我正在尝试创建一个jQuery插件，但是当我尝试获取元素的文本并重复它时，该插件会对页面上的每个元素执行此操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $.fn.codigo = function() {
            this.append(this.text());
        };

    $(function() {
        $('.esto').codigo();
    });

    </script>

</head>
<body>
<div class="esto">1</div>
<div class="esto">2</div>
</body>
</html>

此代码将返回：

112 212

但我只想让它归还：

11 22

Answer 1

像这样编写你的插件

(function($) {

  $.fn.codigo = function() {
    return this.each(function(idx, elem) {
      $(elem).text(function(idx, str) {
        return str + str;
      });
    });
  };

})(jQuery);

JSFIDDLE DEMO

查看.text(fn) API - fn收到index元素和str设置为现有文字。函数的返回值设置新文本。

上面代表了你非常标准的jQuery Plugin样板。但是，如果这是您的插件的真正目标，您可以将其简化一点。

jQuery.fn.codigo = function() {
    return this.text(function(idx, str) { return str + str; });
};

这将非常快，因为它可以将函数调用最小化（与此处提供的其他解决方案相比）。

Answer 2

那是因为this指的是选择器匹配的元素的集合。

您希望each覆盖它并单独处理它们：

$.fn.codigo = function() {
    this.each(function() {
        var $t = $(this);
        $t.text($t.text()+$t.text());
    }):
    return this;
};

Answer 3

插件使用您应用它的元素列表调用一次，而不是每个元素调用一次。因此this是一个包含所有元素的jQuery对象。

遍历元素并将代码应用于每个元素，并制作一个漂亮的插件也返回this以便链接：

$.fn.codigo = function() {
  return this.each(function(i, e){
    $(e).append($(e).text());
  })
};

Answer 4

插件中的

this是一个包含多个元素的jquery集合。我想你想要的是以下内容：

 $.fn.codigo = function() {
     this.each(function(){
         $(this).append($(this).text());
     });
     return this;
 }

Answer 5

    Please try  this one  because  this is very easy and good one concept........
Please you check at-least  one time this one concept..........

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            $.fn.codigo = function() {
                this.append(this.text());
            };

        $(function() {
            $('.esto').each(function(){
                $(this).append($(this).text());
                });
        });

        </script>

    </head>
    <body>
    <div class="esto">1</div>
    <div class="esto">2</div>
    </body>
    </html>

为什么＆＃34;这个＆＃34;在jQuery插件中没有按预期工作？

5 个答案: