Javascript 如何在jQuery中使用“this”？

我有一些重复的代码如下，我想删除重复的代码，以达到干不重复自己的原则。任何能帮助我的人都将不胜感激

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>

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

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

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

Html代码如下所示：

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

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

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

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

我想用下面的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>

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

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

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

<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).html()

---

正确的代码如下所示：

$(this).html()

在jQuery块中，这将引用HtmlDomeElement实例。在此基础上，您可以执行类似DOM的操作，如innerHTML等，但显然您不能执行jQuery方法。。它不是jQuery对象

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

其他一些观点

$.adjustLineFeedProductName.ready毫无意义。跨度或br从未准备好；我很惊讶这居然能奏效。将代码放在$document.ready中就足够了。你可能想要的是使用jQuy.As，这样你就可以针对你的页面上的ActudioFieldPositNo.No.ActudioFrimeQualTyPyPUnod的所有实例，如果只有一个实例，那么考虑一个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);
});

与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);
});

在jQuery块中，这将引用HtmlDomeElement实例。在此基础上，您可以执行类似DOM的操作，如innerHTML等，但显然您不能执行jQuery方法。。它不是jQuery对象

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

其他一些观点

$.adjustLineFeedProductName.ready毫无意义。跨度或br从未准备好；我很惊讶这居然能奏效。将代码放在$document.ready中就足够了。你可能想要的是使用jQuy.As，这样你就可以针对你的页面上的ActudioFieldPositNo.No.ActudioFrimeQualTyPyPUnod的所有实例，如果只有一个实例，那么考虑一个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);
});

与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.html(str);

为此：

$(this).html(str);

更改此项：

this.html(str);

为此：

$(this).html(str);

---

谢谢马特！！！我按照你的建议修改了代码，效果非常好

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>

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

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

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

Html代码如下所示：

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

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

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

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

---

谢谢马特！！！我按照你的建议修改了代码，效果非常好

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>

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

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

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

Html代码如下所示：

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

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

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

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

---

这是一个本机DOM元素，您必须将其包装->$this这是一个本机DOM元素，您必须将其包装->$this$this不执行DOM查找如果这已经是一个DOM元素，它只将该元素包装到jQuery对象中。@Alnitak:Eugh您说得对。这就是为什么我不应该在周末回答这么多问题的原因…：P.@Matt当然，缓存对象仍然是个好主意。您也应该缓存html.length。$如果这已经是DOM元素，则不会进行DOM查找，它只是将该元素包装到jQuery对象中。@Alnitak:Eugh您说得对。这就是为什么我不应该在周末回答这么多问题的原因…：P.@Matt当然，缓存对象仍然是个好主意。而且，您还应该在缓存html.length时进行缓存。