Meaning of this two jquery expression?

Question

HTML CODE

<tr class="roti">

    <td class="ts" rowspan="2">
        <input type="text" class="form-control totalSale" id="totalSaleAmountForRoti" name='totalSaleAmountForRoti' value="0" readonly>
    </td>

</tr>

<tr class="roti">
    column related class="form-control totalSale"
</tr>

What is the difference between them and their meaning?

var $class = $(this).parent().parent().attr('class');

1)

totalSale = $(this).parents('.' + $class).find('.totalSale');

2)

totalSale = $(this).parents('.' + $class).siblings('.' + $class + ':last').find('.totalSale');

And what meanings of this below code?

if ($(this).parent().siblings().children().hasClass('.totalSale')) { ... }

Answer 1

First: There is some HTML missing in your given code.
In the second <tr> block, HTML isn't valid.

Second: The short answer to your question is: No difference. Both statements fail.

---

Care to read?

Supposing the HTML is more like this:

<tr class="roti">
    <td class="ts" rowspan="2">
        <input type="text" class="form-control totalSale" id="totalSaleAmountForRoti" name='totalSaleAmountForRoti' value="0" readonly>
    </td>
</tr>

<tr class="roti">
    <td class="ts" rowspan="2">
        <input type="text" class="form-control totalSale" id="other_id" name='other_name' value="other_value" readonly>
    </td>
</tr>

Then, in your code, you define the variable $class:

var $class = $(this).parent().parent().attr('class');

Which will be set to the value of the grand-parent's attribute class, if found.

This variable definition call is triggered by an event handler or a function binded to an element.
I'm sure about it because of $(this).

---

Let's assume it's the first <input>.
So $class = "roti".

.parent() is the element wrapping...
.parent().parent() is the second level of element wrapping...
And so on.
Okay?

Then
You have two statements here, that try to .find() an element having a class "totalSale", within the childs elements of a collection of elements.
   Yeah, this sentence needs to be read twice.

In both cases, the collection is the result of method chaining.
And the result from it will be stored as the "totalSale" variable... if found.

Now, you have two elements with class "totalSale" in your given HTML.
So let's see the first statement:

1st:

totalSale = $(this).parents('.' + $class).find('.totalSale');

From the first <input>,

1. check within the parent collection if it finds an element with class = $class ("roti") ==> result is UNDEFINED.
2. Sorry, ends there.
3. It won't try to find a child element with class "totalSale" within an undefined collection.

2nd:

totalSale = $(this).parents('.' + $class).siblings('.' + $class + ':last').find('.totalSale');

From the first <input>,

1. check within the parent collection if it finds an element with class = $class ("roti") ==> result is UNDEFINED.
2. Sorry, ends there too.
3. It won't check if there is a siblings element with class "roti" within an "undefined" collection... And certainly not finding the last.
4. It won't check either if it finds a child with class "totalSale".

It all stopped at #2.


You should read more on jQuery starting here.

---

Advise

You should at leat know what you want to understand from a code sample that you don't fully understand.

If you don't know what you want to understand, this community won't help very much.

A MUST reading: How to create a Minimal, Complete, and Verifiable example