1

我有一些重复的代码，如下所示，我想删除重复的代码，以实现“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>
4

4 回答 4

2

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

要创建一个 jQuery 对象，请将 DOM 元素传递给$like ；

$(this)

其他几点；

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

    $(".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);
});

  2. 缓存 的响应$()。$(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);
});

  3. 与 #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);
});
于 2012-12-09T13:07:46.853 回答
1

正确的代码是这样的：

$(this).html()
于 2012-12-09T13:07:24.293 回答
1

改变这个：

this.html(str);

对此：

$(this).html(str);
于 2012-12-09T13:08:05.350 回答
0

谢谢“马特”！！！我按照您的建议修改了代码，它完美无缺！！！

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>
于 2012-12-09T13:34:40.117 回答