How to use "this" in jQuery?

Question

I have some duplicate code like below, I want remove the duplicate code, to achieve "DRY" (Do not Repeat Yourself) principle. Anybody can help me out will be great appreciated!

Javascript code is like below:

<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 code is like below:

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

I want using below Javascript to instead above Javascript, but it is not working:

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

I tried using below html code instead above html code, but it is not working:

<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

Inside a jQuery block, this will refer to the HTMLDomElement instance. On this you can do DOM like operations such as innerHTML etc, but obvious you can't do jQuery methods as.. it isn't a jQuery object.

To create a jQuery object, pass the DOM element to $ like so;

$(this)

---

Some other points;

1. $(".adjustLineFeedProductName").ready() is meaningless. A span or a br is never ready; I'm suprised this even works. Having your code inside a $(document).ready() is enough. What you probably want is to use jQuery.each() so you can target all instances of .adjustLineFeedProductName and .adjustLineFeedQuantityPerUnit on your page (if there is only one instance, consider an ID instead).

   $(".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. Cache the response of $(). $(this). $() does work behind the scenes each time you call it. Whilst it's not a great deal of work for DOMElements, it's a good practice to get into the habit of caching these. jQuery selectors, for example, perform DOM lookups which aren't trivial.

   $(".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. Similar to #2, cache html() as well, for the same reasons.

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

Thanks "Matt" !!! I modified the code as your suggested, it works perfect!!!

Javascript code is like below:

<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 code is like below:

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

Change this:

this.html(str);

to this:

$(this).html(str);

Answer 4

the right code would be like this:

$(this).html()