Comment identifier les éléments de groupe inclus par un autre élément ou une autre balise?

Question

J'ai une question s'il vous plaît référer le code suivant pour comprendre la question. (Je l'ai enlevé « < » et le caractère « > » du code HTML suivant, car sinon les balises HTML ne sera pas visible, donc je l'ai écrit que les noms de balises)

<div> 
    <div> 
     <img /> 
     <img /> 
     <img /> 
     <img /> 
    </div> 
</div> 

Je veux résoudre la tâche suivante à l'aide de jQuery

1. Sur un document prêt à partir de quatre img entre le div interne seulement le premier img devrait être visible et le reste des trois img devrait être caché.
2. Maintenant, sur un événement particulier comme le focus, cliquez sur etc. l'img sur quatre entre le div interne le visible img se cacher et l'autre devrait être visible.

Quelques autres questions:

1. Est-jQuery est en mesure d'identifier uniquement les éléments joints par d'autres tag?

2. Je veux également savoir comment le contrôle circule dans jQuery? spécialement en fonction chaînée. pour EX.

   1. $(selector).fun1(val,{fun2(){ }} dans l'exemple ci-dessus dont la fonction est exécutée d'abord obtenir et dans quel ordre.

   2. $(selecter).fun1().fun2().fun3() dans l'exemple ci-dessus dont la fonction est exécutée en premier et dans quelle séquence.

   3. Dans quelle séquence les fonctions de chaînage de fonctions sont-elles exécutées?

En attente de vos gars réponse!

Answer 1

Essayez quelque chose comme j'ai fait here.

---

La première image (twitter) ne change pas, selon vos besoins. Les seules images qui sont touchées sont celles de la div qui a la classe sample

HTML

<img src="https://s3.amazonaws.com/twitter_production/a/1265328866/images/twitter_logo_header.png"/> 

<input type="text"/> 
<input type="text"/> 
<input type="text"/> 
<input type="text"/> 

<div class="sample"> 
    <img src="http://sstatic.net/so/img/logo.png"> 
    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"> 
    <img src="http://cacm.acm.org/images/logo.ACM.gif"> 
    <img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png"> 
</div> 

JavaScript

$(function() { 
    var textboxes = $("input:text"), //gets all the textboxes   
     images = $(".sample img"); //gets all the images 

    images.not(":first").hide(); //hide all of them except the first one 
    textboxes.each(function (i) { 
     var j = i; 
     $(this).focus(function() { 
      images.hide().eq(j).show(); 
     }); 
    }); 
});