Как определить элементы группы, заключенные в другой элемент или тег?

Question

У меня есть вопрос, пожалуйста, обратитесь к следующему коду, чтобы понять вопрос. (Я удалил символы «<» и «>» из следующего HTML-кода, потому что иначе HTML-теги не будут видны, поэтому я написал только имена тегов)

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

Я хочу решить следующую задачу с помощью jQuery

1. На готовом документе из четырех img между внутренним div должен быть виден только первый img, а остальные три img должны быть скрыты.
2. Теперь для определенного события, такого как фокус, щелчок и т. Д., Из четырех img между внутренним div, где видимый img скрывается, а другое должно быть видимым.

Некоторые другие вопросы:

1. Может ли jQuery идентифицировать только те элементы, которые заключены в другой тег?

2. Я также хочу знать, как управление протекает в jQuery? особенно в цепной функции. например

   1. $(selector).fun1(val,{fun2(){ }} В приведенном выше примере, какая функция выполняется первой и в какой последовательности.

   2. $(selecter).fun1().fun2().fun3() В приведенном выше примере, какая функция выполняется первой и в какой последовательности.

   3. В какой последовательности выполняются функции в цепочке функций?

Жду вашего ответа, ребята!

Answer 1

Попробуйте что-то вроде того, что я сделал здесь .

---

Первое изображение (твиттер) не меняется в соответствии с вашими требованиями. Это затрагивает только те изображения в div, которые имеют класс 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();
        });
    });
});