javascript - 独立选择 jquery 选择器找到的每个项目，对它们运行一个函数 'on load,' 可以这么说

Question

我正在尝试将某个项目的宽度设置为具有特定类的下一个同级项目。我让它工作，但它设置所有实例以匹配第一个所需同级实例的宽度。我想我需要运行一个函数，以便我可以使用 $(this) 选择器来指定下一个同级，但无法找出适当的 jquery 事件。尝试过 on()、read() 和 onload()。

Jquery

$(".table-title").css("width", $(".table-title").next(".data-table").width() - 1);
$(".table-footer").css("width", $(".table-title").next(".data-table").width() - 1);

HTML

<div class="table-container">
    <h3 class="table-title">Data Table</h3>
    <table class="data-table">
      <tr class="data-table-row">
        <th class="data-table-header">ID</th>
        <th class="data-table-header">Username</th>
        <th class="data-table-header">Email</th>
        <th class="data-table-header">Password</th>
      </tr>
      <tr class="data-table-row">
        <td class="data-table-cell">1</td>
        <td class="data-table-cell">Derp</td>
        <td class="data-table-cell">herp@derp.net</td>
        <td class="data-table-cell">123</td>
      </tr>
      <tr class="data-table-row">
        <td class="data-table-cell">2</td>
        <td class="data-table-cell">Foo</td>
        <td class="data-table-cell">bar@foo.404</td>
        <td class="data-table-cell">lolz</td>
      </tr>
    </table>
    <div class="table-footer">
      Table footer
    </div>
  </div>

Answer 1

您可以传递一个函数作为参数，该函数将为 jQuery 集合中的每个项目调用:

$(".table-title").css("width", function() {
    return $(this).next(".data-table").width() - 1);
});