独立选择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">[e-mail]</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);
});