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

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. $(选择器).fun1(val,{fun2(){ }} 在上面的示例中，哪个函数首先执行以及按什么顺序执行。

   2. $(选择器).fun1().fun2().fun3() 在上面的示例中，哪个函数首先执行以及按什么顺序执行。

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

等待你们的回复！

Answer 1

尝试像我在此处所做的那样。

---

根据您的要求，第一张图片（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();
        });
    });
});