Question

我是否可以在jquery中使用一种方法一次单击所有这些div元素，而不是使用下面的javascript方法。

document.getElementById('Div_Remove_1').click();
document.getElementById('Div_Remove_2').click();
document.getElementById('Div_Remove_3').click();
document.getElementById('Div_Remove_4').click();

Answer 1

是的，它被称为start-with选择器：

$('[id^="Div_Remove_"]').click(function() {
  // you code here
});

Answer 2

<强> 1。使用jQuery

(function($) {
  // Assign handlers
  $('button').click(function() {
    console.log(this.id);
  });
  
  // Click all
  $('button').trigger('click');
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button-1">button 1</button>
<button id="button-2">button 1</button>
<button id="button-3">button 1</button>
<button id="button-4">button 1</button>

<强> 2。没有jQuery

您可以使用循环来执行此操作。喜欢这个片段：

// Select all buttons
var buttons = document.querySelectorAll('[id^="button"]');

// Assign handlers
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = clickHandler;
}

// Handler function
function clickHandler(e) {
  console.log(e.target.id);
}

// Trigger handlers
for (var i = 0; i < buttons.length; i++) {
  buttons[i].click();
}

<button id="button-1">button 1</button>
<button id="button-2">button 2</button>
<button id="button-3">button 3</button>
<button id="button-4">button 4</button>

Answer 3

您可以使用jQuery触发连续多个选择器的click事件：

 $('div').on('click', function(){
    $(this).addClass('clicked');
 });
 
 $('#Div_Remove_1, #Div_Remove_2, #Div_Remove_3, #Div_Remove_4').trigger('click');

div { width: 100px; height: 80px; background: black; margin-bottom: 10px; }
div.clicked { background: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Div_Remove_1"></div>
<div id="Div_Remove_2"></div>
<div id="Div_Remove_3"></div>
<div id="Div_Remove_4"></div>

无论如何，如果你能够为这些div添加一个类，你可以轻松地对所有这些做任何事情，例如。 $('.mydivs').trigger('click');

使用jquery单击多个div

3 个答案: