如何在 jQuery 中使用“this”？

Posted 2023-05-09

【中文标题】如何在 jQuery 中使用“this”？

【英文标题】：How to use "this" in jQuery?

【发布时间】：2012-11-27 01:52:43

【问题描述】：

我有一些重复的代码，如下所示，我想删除重复的代码，以实现“DRY”（不要重复自己）原则。任何人都可以帮助我将不胜感激！

javascript 代码如下：

<script type="text/javascript">
    $(document).ready(function () 

        $(".adjustLineFeedProductName").ready(function () 
            var str = "";
            for (i = 0; i < $(".adjustLineFeedProductName").html().length; i += 66) 
                str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + $(".adjustLineFeedProductName").html().substring(i, i + 66) + "</p>";
            
            $(".adjustLineFeedProductName").html(str);
        );

        $(".adjustLineFeedQuantityPerUnit").ready(function () 
            var str = "";
            for (i = 0; i < $(".adjustLineFeedQuantityPerUnit").html().length; i += 66) 
                str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + $(".adjustLineFeedQuantityPerUnit").html().substring(i, i + 66) + "</p>";
            
            $(".adjustLineFeedQuantityPerUnit").html(str);
        );

    );
</script>

HTML代码如下：

<div class="elaborate" style="margin: 0px 0px 0px 0px; padding: 0px 0px 3px 10px;"><b class="adjustLineFeedProductName"><%: (string)Model.Product.ProductName %></b></div>
<div class="elaborate" style="margin: 0px 0px 0px 0px; padding: 3px 0px 0px 10px;"><span class="adjustLineFeedQuantityPerUnit">Quantity/Unit : <%: (string)Model.Product.QuantityPerUnit %></span></div>

我想用下面的 Javascript 代替上面的 Javascript，但它不起作用：

<script type="text/javascript">
    $(document).ready(function () 
        $(".adjustLineFeed").ready(function () 
            var str = "";
            for (i = 0; i < this.html().length; i += 66) 
                str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + this.html().substring(i, i + 66) + "</p>";
            
            this.html(str);
        );
    );
</script>

我尝试使用下面的 html 代码而不是上面的 html 代码，但它不起作用：

<div class="elaborate" style="margin: 0px 0px 0px 0px; padding: 0px 0px 3px 10px;"><b class="adjustLineFeed"><%: (string)Model.Product.ProductName %></b></div>
<div class="elaborate" style="margin: 0px 0px 0px 0px; padding: 3px 0px 0px 10px;"><span class="adjustLineFeed">Quantity/Unit : <%: (string)Model.Product.QuantityPerUnit %></span></div>

【问题讨论】：

this 是一个原生 DOM 元素，你必须把它包装起来 -> $(this)

【参考方案1】：

在 jQuery 块中，this 将引用 HTMLDomElement 实例。在这一点上，您可以执行类似 DOM 的操作，例如 innerHTML 等，但显然您不能执行 jQuery 方法，因为它不是 jQuery 对象。

要创建一个 jQuery 对象，像这样将 DOM 元素传递给$；

$(this)

---

其他几点；

$(".adjustLineFeedProductName").ready() 毫无意义。 span 或 br 是从不 ready；我很惊讶这甚至有效。将您的代码放在$(document).ready() 中就足够了。您可能想要的是使用jQuery.each()，这样您就可以在页面上定位.adjustLineFeedProductName 和.adjustLineFeedQuantityPerUnit 的所有 个实例（如果只有一个实例，请考虑使用ID）。 p>

$(".adjustLineFeedProductName").each(function () 
    var str = "";
    for (i = 0; i < $(this).html().length; i += 66) 
        str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + $(this).html().substring(i, i + 66) + "</p>";
    
    $(this).html(str);
);

缓存$()的响应。 $(this)。 $() 每次调用它时都会在幕后工作。虽然 DOMElements 的工作量并不大，但养成缓存这些内容的习惯是一个好习惯。例如，jQuery 选择器执行的 DOM 查找并不简单。

$(".adjustLineFeedProductName").each(function () 
    var str = "";
    var self = $(this); // cache

    for (i = 0; i < self.html().length; i += 66)  // use self
        str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + self.html().substring(i, i + 66) + "</p>"; // use self
    
    self.html(str);
);

与 #2 类似，同样缓存 html()。

 $(".adjustLineFeedProductName").each(function () 
    var str = "";
    var self = $(this); // cache
    var html = self.html();

    for (i = 0; i < html.length; i += 66)  // use self
        str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + html.substring(i, i + 66) + "</p>"; // use self
    
    self.html(str);
);

【讨论】：

$(this) 如果 this 已经是一个 DOM 元素，则不会进行“DOM 查找”，它只是将该元素包装在一个 jQuery 对象中。

@Alnitak：嗯，你是对的。这就是为什么我不应该在周末回答 SO 问题...：P。

@Matt 当然，缓存对象仍然是一个好主意。你也应该缓存html.length，当你在它的时候。

【参考方案2】：

正确的代码应该是这样的：

$(this).html()

【参考方案3】：

改变这个：

this.html(str);

到这里：

$(this).html(str);

【参考方案4】：

感谢“马特”！！！我按照你的建议修改了代码，效果很好！！！

Javascript 代码如下：

<script type="text/javascript">
    $(document).ready(function () 
        $(".adjustLineFeed").each(function () 
            var str = "";
            var self = $(this); // cache
            var html = self.html();
            for (i = 0; i < html.length; i += 66) 
                str = str + "<p style=\"margin: 0px 0px 0px 0px;\">" + html.substring(i, i + 66) + "</p>";
            
            self.html(str);
        );
    );
</script>

HTML代码如下：

<div class="elaborate" style="margin: 0px 0px 0px 0px; padding: 0px 0px 3px 10px;"><b class="adjustLineFeed"><%: (string)Model.Product.ProductName %></b></div>
<div class="elaborate" style="margin: 0px 0px 0px 0px; padding: 3px 0px 0px 10px;"><span class="adjustLineFeed">Quantity/Unit : <%: (string)Model.Product.QuantityPerUnit %></span></div>