Show (). parent (). show () - What is going on here?

Question

I don’t understand what happens when you make a .show () s chain like this. I also did not write this code or understand how to figure it out. Hence this question.

// Remove favorite category $(".FavoriteRemove").click(function() { var cat = $(this).parents(".Category"); //the parent of the clicked item is the category/bundle var catid = $(this).attr("catid"); //the id tag on the clicked item is the BundleID $.post($(this).attr("href"), function() { //the href tag is the post URL for adding a favorite cat.remove(); //here we remove the category/bundle //*** WHAT IS THIS DOING? v $(".Category[catid=" + catid + "]").show().parent().show(); //*** NO THAT UP THERE ^ if ($(".FavoriteCategories div").length == 0) $(".FavoriteCategories").hide(); //bindCategories(); }); return false; }); 

Can someone describe what this means? I know that the target is a Category class with an attribute corresponding to an ID, but I don’t understand what a chain of functions means.

Thanks.

Answer 1

• First, the show() ^(docs) element with the Category class and the catid attribute with the value of this variable.
• Then go to your parent using the parent() ^(docs) method.
• Then show() ^{(docs) is the} parent.

“Display” means setting its display style property from none to its original (or default) value, such as block .

Answer 2

In JavaScript, you can directly “use” the return value of a function call without assigning a value to a variable. Here is an example below:

 var john = { me: function() { alert('...John'); } } var foo = { call: function() { alert('You called..'); return this; // <- note that an object is returned }, // (in this case foo itself but could be any object) callSomeoneElse: function() { alert('You called..'); return john; // <- note that an object is returned }, me: function() { alert('...me'); } } foo.call().me() foo.callSomeoneElse().me() 

---

Now to the method call:

If you

 $(selector).show() 

then the selected items are displayed. show again returns a set of selected items (same items selected by $(selector) ). This allows us to call another method on them: parent() selects (returns) the parent nodes of these elements (so we have a different set now), and the second show() works with this new (parent) set (and returns the parent set).

So

 $(selector).show().parent().show() 

will display the selected items and their parents.

---

The whole concept is called a free interface and is achieved using a chain of methods .

Answer 3

 $(".Category[catid=" + catid + "]").show().parent().show(); 

It will show (make visible) an element with the Category class and set catid for the catid variable, and it will show the parent element:

 <div> <span class="Category" catid="1"></span> </div> 

In this case, it will display both span and div.