How exactly does this JQuery script work? and how can I modify it to select a specific object?

Question

I am absolutly new in JavaScript and jQuery and I have the following problem.

I have the following jQuery script:

$(document).ready(function () {
        $("thead.opening").click(function () {
            $(this).next().slideToggle('slow', function () {
                $(this).prev("thead.opening").toggleClass("active");
                $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
            });
            return false;
        });
    });

and in my HTML I have something like this:

<table class="standard-table-cls table-header-cls">
        <thead class="opening active">
        <tr>
            <th>
                <img class="imgAccordion" src="img/arrow_down.gif"/>
                Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
            </th>
        </tr>
        </thead>

        <tbody class="expanded">
            <tr>
                <td style="width: 100em;">
                    SHOW SOMETHING
                </td>
            </tr>
        </tbody>
</table>

...........................................................
...........................................................
...........................................................


<table class="standard-table-cls table-header-cls">

    <thead class="opening">
        <tr>
            <th>
               <img class="imgAccordion" src="img/arrow.gif"/>
               Ricerca Fatture
            </th>
        </tr>
    </thead>

    <tbody class="expanded" style="display: none;">
        <tr>
            <td style="width: 100em;">
                 SHOW SOMETHING ELSE
            </td>
        </tr>
    </tbody>

<table>

As you can see in my code there is 2 different tables both having the same classes (standard-table-cls table-header-cls).

When I click on the thead of one of these table it seems to me that the previous script is perfromed (it is right or am I saying wrong assertion?).

I think so because this statment:

 $("thead.opening").click(function () {.......

means something like: perform the body of the defined function() when the user click on any thead element having class=opening.

Is it my reasoning correct?

No my doubt (and also the related problem) is: how jQuery know what is the specific thead.opening clicked by the user (the one related to the first table or the one related to the second table)?

What exactly represent the $(this) element in the previous script? (it is the selected object or what?)

And finally, how can I modify the previous script to obtain the reference of the inner tbody of the same table of the thead.opening clicked?

Tnx

First `this` is table `thead`, second is `tbody` (jQuery [next method](https://api.jquery.com/next/) returns the immediately following sibling). You can easily output it to console and see: `console.log( $(this) )`. — skobaljic, Apr 30 '15 at 14:45

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

I'll keep this as short as possible but this is the scope in the current function. In elements, its an element. So for you?

$("thead.opening").click

runs a function. So the $(this) is the thread.opening that was actually clicked.

Post

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 30 '15 at 14:44

Downgoat

13,771
5
46
69

Ok, great explaination but how can I select the tbody element of the thread.opening clicked? Can I do something like $(this).next() ? or what? – AndreaNobili Apr 30 '15 at 14:49

Tr1stan · Answer 2 · 2015-04-30T15:02:18.440

0

$("thead.opening") returns a array of elements that match the selector, in your case the two separate table headers that have the class opening added to them.

the .click() assigns a click event handler to each of the elements returned by the selector. In your case to both the table headers.

$(this) refers to element which invoked the event in the event handler.

The code $(this).next().slideToggle( is already referencing the next sibling of the thead - in your HTMLs case, the tbody.

edited Apr 30 '15 at 15:02

answered Apr 30 '15 at 14:49

Tr1stan

2,755
1
26
45

Ok, so the $("thead.opening").click is the thead having class="opening" that was clicked? is it right? But what can I do to select its relative tbody element? Can I use something like $(this).next() to select it? or what? – AndreaNobili Apr 30 '15 at 14:52
Have you started playing with the console in your browser? Hit F12 and you'll be able to run the javascript directly in the browser. If you're using firefox then I recommend using Firebug to help you along. You should be able to use $(this).next() to gain a reference to the next sibling in the DOM - in your case, the tbody. You've also got options like using $(this).parent('table').find('tfoot') to go up a level in the hierarchy and then find the footer of the table (if you had one). – Tr1stan Apr 30 '15 at 14:56

score 0 · Accepted Answer · edited May 23 '17 at 10:24

this statment ... perform the body of the defined function() when the user click on any thead element having class=opening.

yes that is correct.

how JQuery know what is the specific thead.opening clicked by the user

the answer lies in: $(this).next().slideToggle('slow', function ()....

What exactly represent the $(this) element in the previous script?

the object which is clicked.

obtain the reference of the inner tbody of the same table of the thead.opening clicked

use something similar to the following in the click handler:

$(this).closest('.standard-table-cls').children('tbody')

reference: here and here

hope this helps.

score 0 · Answer 4 · answered Apr 30 '15 at 14:53

When I click on the thead of one of these table it seems to me that the previous script is perfromed (it is right or am I saying wrong assertion?).

You are right

Is it my reasoning correct?

This is correct

What exactly represent the $(this) element in the previous script? (it it the selected object or what?)

$(this) referes to the element invoking the function $("thead.opening").click(function () {});, so $(this) is equal to $("thead.opening"), where thead.opening is the exact element clicked (not the other thead.opening in your document).

And finnally, how can modify the previous script to obtain the reference of the inner tbody of the same table of the thead.opening clicked?

$(this).next() (which is used in your exemple) is the selector to target the tbody. $(this).next()means this (clicked thead), find next sibling element (tbody).

score 0 · Answer 5 · answered Apr 30 '15 at 15:05

You will have to change your script and change selectors. Current $("thead.opening") will for example select all <thead class="opening"> tags, so it would have to be similar to this:

$(document).ready(function () {
    $("thead.opening").click(function () {
        var thisThead = $(this);
        var thisTbody = thisThead.next();
        thisTbody.slideToggle('slow', function () {
            thisThead.toggleClass("active");
            thisThead.find(".imgAccordion").attr("src", thisThead.is('.active') ? "http://placehold.it/30/ffffff/000000" : "http://placehold.it/30/000000/ffffff");
        });
    });
});

Check this Fiddle with 2 tables.

How exactly does this JQuery script work? and how can I modify it to select a specific object?

5 Answers5

Post