【问题标题】:What exactly does jQuery's last return?jQuery 的最后返回究竟是什么?
【发布时间】:2011-09-29 17:40:38
【问题描述】:

我不得不将 javascript 和 jQuery 混合在一起,直到我可以进行适当的重写。看来下面的代码是不等价的:

    var something = $(".image:last"); // Last element with image class?

    var element = document.getElementById("slideshow"); // HTML UL with images as children
    var lastChild = element.lastChild;

jQuery 究竟返回了什么?

P.S:我可能对实际归因有误。如果是这种情况,请道歉。我对 jQuery 很陌生。

【问题讨论】:

  • 没有相关代码,无法判断它是否等效。实际上,“something”是“image”类的最后一个元素,而“lastChild”是“slideshow”容器的最后一个子元素。

标签: jquery return


【解决方案1】:

我相信所有的 jQuery 选择器都会返回一个 jquery 对象——而不是一个元素。

我认为如果您选择 jquery 对象中的第一项,您将收到实际的元素,所以:

var something = $(".image:last")[0]

将是您所追求的元素。

【讨论】:

    【解决方案2】:

    jQuery 返回一个 jQuery 对象。在这种情况下,该对象代表页面上的一个元素,但它包含大量额外功能,这些功能在 jQuery 文档页面上进行了记录:http://docs.jquery.com/Main_Page

    我喜欢把 jQuery 的 $() 函数想象成一种超级英雄的斗篷。将斗篷包裹在页面上的一个元素上,它会获得一堆超能力。

    尝试使用 Firebug 之类的工具来检查您的对象,它会以一种更有意义的方式显示它们。

    【讨论】:

      【解决方案3】:

      jQuery 将返回一个 jQuery 对象,这就是它们不同的原因。

      因此,两者:

      $(".image:last") == $(lastChild)
      

      和:

      $(".image:last")[0] == lastChild
      

      当然,假设您在同一个元素上运行这些选择,会给您相同的结果。

      一般来说,$(".image:last") 会找到所有具有 image 类的元素,然后返回它找到的最后一个元素,并包装在一个 jQuery 对象中。

      请注意,它们在技术上并不等同:({} == {}) 在 JavaScript 中为 false。 (感谢@lonesomeday 的评论提醒我)。

      第一个将lastChild 包装在一个 jQuery 对象中,第二个从 jQuery 对象中获取实际元素。

      【讨论】:

      • 不,他们不会。 :last 没有得到最后一个孩子,甚至{} === {} 也是假的——即使对象具有完全相同的属性,它们也不相等。
      • @lonesomeday 非常感谢,编辑了我的帖子,试图稍微澄清一下。
      【解决方案4】:
      $('.image:last')
      

      这告诉 jQuery 获取类 image 的所有元素,然后获取最后一个。将返回一个 jQuery 选择(自定义对象);该元素将是选择的唯一成员。

      请注意,这将返回最后一个 .image 元素。

      var element = document.getElementById("slideshow");
      var lastChild = element.lastChild;
      

      获取id为slideshow的元素,然后返回最后一个子节点。注意两件事:它返回一个子节点(而 jQuery 找到了匹配选择器的最后一个元素),它返回一个节点。元素是一种节点,但 text 和 cmets 也是节点。如果元素末尾有空格,那将是lastChild,而不是最后一个子元素。

      也许如果您能澄清您要更改的确切代码,我可以更具体地说明您需要做什么。

      【讨论】:

        【解决方案5】:

        这在很大程度上取决于实际的 DOM,这两种方法是否选择相同的元素。

        $(".image") 将选择所有具有类.imageDOM 元素(在整个页面中)。 :last 将为您提供集合中的最后一个元素,并将其返回包装在一个 jQuery 对象中。

        另一方面:

        var element = document.getElementById("slideshow");
        var lastChild = element.lastChild;
        

        将只选择#slideshow 的最后一个孩子(可能与$(".image:last")[0] 等效,也可能不等效)。这会返回一个 DOM node,不一定是 DOM element

        例如这里

        <div id="slideshow">
        <br />
        </div>
        

        lastChild 是一个包含换行符的文本节点


        所以要记住的事情是:

        • #slideshow 可能不包含类 .image 的所有元素(您可以使用 $('#slideshow .image') 在 jQuery 中限制搜索。

        • element.lastChild 可能返回 文本节点 而不是元素节点。你可以遍历之前的兄弟姐妹,直到找到一个元素节点,例如:

          var lastChild = element.lastChild;
          while(lastChild.nodeType !== 1 && (lastChild = lastChild.previousSibling));
          
          if(lastChild) {
              // last element node found
          }
          

        【讨论】:

          猜你喜欢
          • 2015-08-18
          • 1970-01-01
          • 2011-07-31
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-05-06
          相关资源
          最近更新 更多