1

以下のような重複コードがあります。「DRY」（Do not Repeat Yourself）の原則を実現するために、重複コードを削除したいと思います。誰でも私を助けることができます大いに感謝されます！

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などの操作のようなDOMを実行できますが、jQueryメソッドを実行できないことは明らかです。これはjQueryオブジェクトではありません。

jQueryオブジェクトを作成するには、DOM要素を$そのように渡します。

$(this)

他のいくつかのポイント;

  1. $(".adjustLineFeedProductName").ready()無意味です。Aspanまたはabrは決して readyありません; 私はこれがうまくいくことに驚いています。コードをaの中$(document).ready()に入れるだけで十分です。おそらくあなたが望むのは、あなたがあなたのページのそしてあなたのページ上のすべてのインスタンスをjQuery.each()ターゲットにすることができるように使うことです（インスタンスが1つしかない場合は、代わりに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 に答える