如何仅对菜单中的第一个元素执行触发事件

Question

在页面加载时，我需要在菜单上进行触发调用

我只需要在我的情况下为第一个元素

执行此操作

<div class="swiper-wrapper" id="swipecontainer">
    <div class="swiper-slide swiper-slide-visible swiper-slide-active"><span>Bottle</span>
    </div>
    <div class="swiper-slide swiper-slide-visible"><span>Cool Drinks</span>
    </div>
</div>

这是我的代码

$(document).on("click", ".swiper-slide", function (event) {
    alert('Clciked');
    event.stopPropagation();
    event.preventDefault();
    event.stopImmediatePropagation();
});
$(".swiper-slide").trigger("click");

http://jsfiddle.net/7d060586/1/

我面临的问题是它正在对菜单中的所有项目进行触发调用

请您告诉我如何只对菜单的第一项说明。

提前致谢。

Answer 1

使用:first，.first()或.eq(0)：

$("#swipecontainer .swiper-slide:first").trigger("click");

Example Here

---

$("#swipecontainer .swiper-slide").first().trigger("click");

Example Here

---

$("#swipecontainer .swiper-slide").eq(0).trigger("click");

Example Here

Answer 2

使用css选择器将是IMO最简单的方法。

//cache element
var element = $('.swiper-slide:first')
element.on("click", function (event) {
    alert('Clicked');
});