如何使用jQuery触发两个按钮

Question

这是我的HTML代码

<ul id="btn-list">
    <li><span><button class="btn btn-warning btn-lg">Btn1</button></span></li>
    <li><span><button class="btn btn-warning btn-lg">Btn2</button></span></li>
    <li><span><button class="btn btn-info btn-lg">Btn3</button></span></li>
</ul>

我想触发btn1和btn2的click事件，但是我不知道如何编写特定的按钮选择器，因为这些按钮没有分配名称和ID属性。

$("#btn-list ???").trigger("click");

- Ashis Biswas

Answer 1

你可以使用 :lt() 选择器。

选择匹配集合中所有索引小于 index 的元素。

$('#btn-list button:lt(2)').trigger('click');

或者，您可以使用:eq()

$('#btn-list').find('button:eq(0), button:eq(1)').trigger('click');

- Satpal

---

如果我想触发第一个按钮，那么怎么办？ - Ashis Biswas

@AshisBiswas，你还可以使用$('#btn-list button:first').trigger('click');或者$('#btn-list button:eq(0)').trigger('click');。 - Satpal

Answer 2

你可以在下面看到可行的解决方案。

当你运行以下代码片段时，点击Button1会触发一个按钮点击事件，点击Button2会同时触发两个按钮的点击事件。

$("button:first").click(function () {
    update($("span:first"));
});
$("button:last").click(function () {
    $("button:first").trigger('click');
    update($("span:last"));
});

function update(j) {
    var n = parseInt(j.text(), 10);
    j.text(n + 1);
}

button { margin:10px; }
div { color:blue; font-weight:bold; }
span { color:red; }

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button #1</button>
<button>Button #2</button>

<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>

- Heemanshu Bhalla

Answer 3

<ul id="btn-list">
<li><span><button class="btn  btn-warning btn-lg">Btn1</button></span></li>
<li><span><button class="btn  btn-warning btn-lg">Btn2</button></span></li>
<li><span><button class="btn btn-info btn-lg">Btn3</button></span></li>

$('#btn-list').slice(1,3).on('click','button', function (evt) {
 //-- do stuff
});

- Mohamed Nizar

---

我无法分配任何额外的名称或ID属性。 - Ashis Biswas