如何识别被其他元素或标签包围的组元素？

Question

我有问题请参考以下代码来理解问题。 （我从以下 html 代码中删除了 '' 字符，否则 html 标签将不可见，所以我只写了标签名称）

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

我想在 jQuery 的帮助下解决以下任务

1. 在内部 div 之间的四个 img 中准备好的文档中，只有第一个 img 应该可见，其余三个 img 应该隐藏。
2. 现在，在特定事件（例如焦点、单击等）上，内部 div 之间的四个 img 中可见的 img 会隐藏，而另一个应该会可见。

其他一些问题：

1. jQuery 是否只能识别被其他标签包围的元素？

2. 我也想知道 jQuery 中的控制流程是怎样的？特别是在链式功能。 对于 EX。

   1. $(selector).fun1(val,{fun2(){ }} 在上面的例子中，首先执行哪个函数，以什么顺序执行。

   2. $(selecter).fun1().fun2().fun3() 在上面的例子中，首先执行哪个函数，以什么顺序执行。

   3. 函数链中的函数按什么顺序执行？

等待你们的回复！

Answer 1

像我 here 那样尝试。

---

根据您的要求，第一张图片 (twitter) 不会更改。唯一受影响的图像是 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();
        });
    });
});