Question

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

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>

Answer 1

在jQuery块中，this将引用HTMLDomElement实例。在这方面你可以像innerHTML等那样执行DOM操作，但很明显你不能把jQuery方法当作...它不是一个jQuery对象。

要创建jQuery对象，请将DOM元素传递给$，如此;

$(this)

其他一些观点;

$(".adjustLineFeedProductName").ready()毫无意义。 span或br 从不 ready;我很惊讶这甚至有效。将代码置于$(document).ready()内就足够了。你可能想要的是使用jQuery.each()，这样你就可以在你的页面上定位 .adjustLineFeedProductName和.adjustLineFeedQuantityPerUnit的所有实例（如果只有一个实例，请考虑一个而不是ID。
```
$(".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);
});

Answer 2

正确的代码是这样的：

$(this).html()

Answer 3

改变这个：

this.html(str);

到此：

$(this).html(str);

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

如何在jQuery中使用“this”？

4 个答案: