独立地选择jquery选择器找到的每一项，在它们上运行一个函数，可以这么说

Question

我正试图将项的宽度设置为与某个类同级的下一个同级。我让它正常工作，但它将所有实例设置为与所需的第一个实例的宽度相匹配。我认为我需要运行一个函数，这样我就可以使用$( this )选择器来指定这个下一个同胞，但是无法找到合适的jquery事件。已试用()、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);
});