单击具有数据属性的按钮

Question

我正在为Greasemonkey（或Tempermonkey）的网站编写脚本扩展。 当我想自动对焦（甚至自动单击）不包含id而是包含data-attribute的按钮时，发生了问题。

<div id="wrapper_container">
    <form id="form1" action="/?module=Action" method="post">
<table class="thinline" align="center">
    <tbody>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="184">Go</button></td>
    </tr>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="185">Go</button></td>
    </tr>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="186">Go</button></td>
    </tr>
    <tr>    
        <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td>
        <td><button class="btn btn-small" data-info="contact" data-value="187">Go</button></td>
    </tr>
    </tbody>
</table>
    </div>
</div>

已经尝试了无数次，但让我无所适从，想知道为什么这不起作用：

$("#wrapper_container button:eq(4)").focus();

试图在div中选择第4个（或将来的第n个）按钮，但不幸。

例如，我希望将具有数据值“ 186”的按钮聚焦或单击页面加载。 由于输入的内容多于显示的内容，因此我想为选择的第n个按钮执行此操作。

提前致谢。

Answer 1

如果您只需要关注data-value = 186的静态按钮，请使用以下命令：

$("#wrapper_container button:eq(2)").focus();

通过更多控制来查看此示例，只需传递所需的值即可：

 $('#wrapper_container button').each(function() { var dataValue = $(this).data("value"); if (dataValue == 186) { $(this).focus(); } }); 

 button:focus { background: limegreen; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div id="wrapper_container"> <form id="form1" action="/?module=Action" method="post"> <table class="thinline" align="center"> <tbody> <tr> <td>1</td> <td>Name</td> <td>Surname</td> <td>E-mail</td> <td>Phone Number</td> <td>Contact</td> <td> <button class="btn btn-small" data-info="contact" data-value="184"> Go </button> </td> </tr> <tr> <td>1</td> <td>Name</td> <td>Surname</td> <td>E-mail</td> <td>Phone Number</td> <td>Contact</td> <td> <button class="btn btn-small" data-info="contact" data-value="185"> Go </button> </td> </tr> <tr> <td>1</td> <td>Name</td> <td>Surname</td> <td>E-mail</td> <td>Phone Number</td> <td>Contact</td> <td> <button class="btn btn-small" data-info="contact" data-value="186"> Go </button> </td> </tr> <tr> <td>1</td> <td>Name</td> <td>Surname</td> <td>E-mail</td> <td>Phone Number</td> <td>Contact</td> <td> <button class="btn btn-small" data-info="contact" data-value="187"> Go </button> </td> </tr> </tbody> </table> </div> </div> 

Answer 2

要获得第四个，您需要eq(3)因为它是零索引数组。

以下是一些示例，可以助您一臂之力：

 $(function(){ // extra bit of code to 'prove' each button is beaing clicked $('#wrapper_container button').on('click', function(e) { console.info('Button clicked, I am button with data value: ' + $(this).attr('data-value')); }); // You know the IDs of the buttons, you could do: let IDs = [186, 187]; IDs.forEach(ID => { console.info('Clicking button with data-value = ' + ID); $('[data-value=' + ID + ']').click(); }); // You just need a single ID: let ID = 187; console.info('Clicking single button with data-value = ' + ID); $('[data-value=' + ID + ']').click(); // Select nth button in your container, // as you are trying the 4th button, we use 3, because it is a zero-indexed array, starting at 0 of course: let btn = $('#wrapper_container').find('button:eq(3)'); console.info('Clicking 4th button in #wrapper_container'); btn.click(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper_container"> <form id="form1" action="/?module=Action" method="post" onsubmit="return false"> <table class="thinline" align="center"> <tbody> <tr> <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td> <td><button class="btn btn-small" data-info="contact" data-value="184">Go</button></td> </tr> <tr> <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td> <td><button class="btn btn-small" data-info="contact" data-value="185">Go</button></td> </tr> <tr> <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td> <td><button class="btn btn-small" data-info="contact" data-value="186">Go</button></td> </tr> <tr> <td>1</td><td>Name</td><td>Surname</td><td>E-mail</td><td>Phone Number</td><td>Contact</td> <td><button class="btn btn-small" data-info="contact" data-value="187">Go</button></td> </tr> </tbody> </table> </form> </div>