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

要获得第4个，您需要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>

单击具有数据属性的按钮

2 个答案: