Javascript 改进HTML5视频和jQuery代码以提高效率

我的网页上有5个视频。只有当您将鼠标悬停在视频上时，视频才会开始播放。我的代码如下：

$(".service:nth-child(1) a").hover(function(){
    $('.service:nth-child(1) a video#bgvid').get(0).play();
},function(){
    $('.service:nth-child(1) a video#bgvid').get(0).pause();
});

---

我使用了

：nth child

，因为如果我将鼠标悬停在视频4上，它将播放视频1，因此我必须具体说明。这意味着我必须对每个视频重复上述代码，但相应地更改

：n个孩子的编号。我对JS不是特别熟练，但必须有一种更好、更有效的方法来做这件事？
未经测试，但
这应该可以让你开始。哈，一个双关语<代码>此
。明白了吗

$('.service a').hover(function(){
  $(this).children('video').get(0).play();
}, function(){
  $(this).children('video').get(0).pause();
});

另请参见：
正如brad所说，使用
此
将允许您获取当前悬停的元素。
但是，afaik jQuery不允许您通过其对象访问HTML5视频API，因此您需要执行以下操作：

$('.service a video').hover(function(e){
  e.target.play();
}, function(e){
  e.target.pause();
});

将函数绑定到事件时，
此
始终是触发事件的对象。调用
$（this）
返回一个jQuery的对象
您做了一个有趣的事情！；）我已经探索过这个选项，但它对我不起作用，因为我需要专门针对儿童视频#bgvid。服务a如果有意义的话？@egr103它有。在这种情况下，您可以使用
$（this）.children（'video'）
或类似的东西。还要注意的是，你不应该多次使用同一个ID。很好，这就成功了。我仍然必须使用.get（0）使其正常工作，但是.孩子们做到了。谢谢