show(). Parent(). Show() - ¿Qué está pasando aquí?

Question

No entiendo lo que sucede cuando haces una cadena de .show() s así. Tampoco escribí este código o tengo una idea de cómo descubrir lo que está sucediendo aquí. De ahí esta pregunta.

// 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; 
    }); 

¿Alguien puede describir lo que significa? Soy consciente de que el objetivo es la clase 'Categoría' con un atributo que coincide con la ID, pero no entiendo qué significa la cadena de funciones.

Gracias.

Answer 1

• Primera show()^(docs) el elemento con la clase Category, y el atributo catid con el valor de la variable dada.
• Luego recorra hasta su elemento principal utilizando el método parent()^(docs).
• Luego show()^(docs) el padre.

"Mostrando" significa el establecimiento de su propiedad de estilo display de none a su valor inicial (o por defecto), al igual que block.

Answer 2

En JavaScript, puede "utilizar" directamente el valor de retorno de una llamada de función sin asignar el valor a una variable. Here is a stripped down example:

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

---

ahora a su llamada al método:

Si tiene

$(selector).show() 

y tendrá acceso a los elementos seleccionados. show devuelve nuevamente el conjunto de elementos seleccionados (los mismos elementos seleccionados por $(selector)). Esto nos permite llamar a otro método: parent() selecciona (devuelve) los nodos principales de estos elementos (por lo que ahora tenemos un conjunto diferente) y el segundo show() opera en este nuevo conjunto (principal) (y devuelve el conjunto primario).

Así

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

mostrará los elementos seleccionados y sus padres.

---

El conjunto concepto se denomina fluent interface y se logra a través method chaining.

Answer 3

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

Mostrará (hacer visible) el elemento (s) con una clase Category y un conjunto catid a la variable catid, y se mostrará el elemento padre:

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

En este caso mostraría tanto el tramo como el div.