为什么Jquery使用某些方法只选择第一个元素，而使用其他方法只选择所有元素？

Question

我正在尝试通过 jQuery 暂停三个视频。由于某种原因，我的代码在使用 .get() 方法时仅选择第一项，但当我使用 .css() 方法时，所有相关元素都会被选择。有人可以帮助我理解为什么吗？

这是 html：

<div id="myCarousel" class="carousel slide">
  <div class="item action"><video src="video1.MOV"></video></div>
  <div class="item"><video src="video2.MOV"></video></div>
  <div class="item"><video src="video3.MOV"></video></div>
</div>

这是使用 .get() 方法的 jquery，仅影响第一个视频（“video1.MOV”）：

$('div.carousel-inner .item').children("video").get(0).pause();

使用 .css() 方法，我能够选择带有 class="item" 的元素：

$('div.carousel-inner .item').children("video").css( "background-color", "red" );

可以有人帮我理解为什么只有第一个视频被暂停？我想修改 jQuery 以暂停所有视频。谢谢！

Answer 1

正如 Adeno 所证实的，某些 jQuery 方法仅适用于集合中的第一个元素，这就是为什么我只能暂停第一个视频，而不能暂停后续视频，而 .css() 方法适用于所有视频元素。

要让所有视频暂停，请使用以下代码：

$('div.carousel-inner video').each(function(){
  this.pause();
});

按照 html 的设置方式，我需要获取每个 .item 元素的子节点。

有关于此的一些信息：
jQuery 有一个简单的逻辑，无论是在所有元素上还是仅在第一个元素上调用方法。如果方法返回某些内容（不返回未定义），jQuery 将不会迭代所有元素。在这种情况下，jQuery 将调用第一个元素上的方法并返回该方法的返回值。如果它不返回任何内容，jQuery 将在所有元素上调用该方法并返回用于链接的 jQuery 对象。

在这种特殊情况下，您使用的是暂停方法，该方法不是 jQuery 方法，而是普通的 DOM 方法，并且必须在每个 DOM 元素本身上调用。 jQuery 的 .get 方法总是返回 jQuery 集合内的 DOM 元素。 $.get(0) 在这里用于返回第一个 DOM 元素。

Answer 2

您只需使用，

$('div.carousel-inner .item').children("video") 

即可选择 .item 类下的所有子元素。 .get(index) 最终将从该集合中获取指定索引处的元素。这样你就会看到这种行为。

$('div.carousel-inner .item').children("video").get(0)

非常等于

$('div.carousel-inner .item' ).children("video")[0]

请阅读此处了解有关 .get() 的更多信息