Jquery选择器不作为对象而不是元素返回答案

【问题标题】：Jquery selector not working as object is returned instead of elementJquery选择器不作为对象而不是元素返回
【发布时间】：2022-10-02 01:19:14
【问题描述】：

我正在使用 Jquery 数据表，它具有下拉形式的过滤器。 HTML 如下所示。

<table id=\"example\">
   <thead>
     <tr>
       <th>Name</th>
       <th>Position</th>
       <th>Office</th>
       <th>Age</th>
       <th>Start date</th>
       <th>Salary</th>
     </tr>
     <tr>
       <td></td>
       <td><select><option>-Filter-</option></select></td>
       <td><select><option>-Filter-</option></select></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Tiger Nixon</td>
       <td>System Architect</td>
       <td>Edinburgh</td>
       <td>61</td>
       <td>2011-04-25</td>
       <td>$320,800</td>
     </tr>
     <tr>
       <td>Tiger Nixon</td>
       <td>System Architect</td>
       <td>Edinburgh</td>
       <td>61</td>
       <td>2011-04-25</td>
       <td>$320,800</td>
     </tr>
   </tbody>
  </table>

过滤器下拉列表可以在任何列中，因为它在许多具有不同数据集的地方使用。因此，我使用 Datatable 提供的方法使其动态化，并设法通过过滤器下拉列表找到<td> 元素。

var filterColumn = $(\"#example thead tr:eq(1) td:eq(\" + i + \") select\");

在上面的代码 sn-p 中，i 是来自总体函数并在 td:eq 中成功分配的列号，但是，我的 Jquery 选择器不会返回表格单元格内的下拉列表，而是返回 Jquery对象如下。

任何帮助都非常感谢修复选择器。

JS bin - https://jsbin.com/badopohino/edit?html,js,output

谢谢。

$(\'#example\').DataTable({
  orderCellsTop: true,
  stateSave: true,
  initComplete: function() {
    this.api()
      .columns([1, 2])
      .every(function() {
        var column = this;
        var select = $(\'<select class=\"form-control form-control--filter\"><option value=\"\"> -- Filter -- </option></select>\')
          .appendTo($(\'thead tr:eq(1) td:eq(\' + this.index() + \')\'))
          .on(\'change\', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            column
              .search(val ? \'^\' + val + \'$\' : \'\', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          if (!d == \'\') {
            select.append(\'<option value=\"\' + d + \">\' + d + \'</option>\');
          }
        });
      });
  },
  stateLoadParams: function(settings, data) {
    for (i = 0; i < data.columns[\"length\"]; i++) {
      var col_search_val = data.columns[i].search.search;

      if (col_search_val != \"\") {
        var filterColumn = $(\"#example thead tr:eq(1) td:eq(\" + i + \") select\");
        console.log(filterColumn, i);
      }
    }
  }


});

var abc = $(\"#example thead tr:eq(1) td:eq(1) select\");

//console.log(abc);

<!DOCTYPE html>
<html>

<head>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width\">
  <title>JS Bin</title>
</head>

<body>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width\">
    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css\">
    <link rel=\"stylesheet\" href=\"//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css\">
    <title>JS Bin</title>
  </head>

  <body>
    <table id=\"example\" class=\"table table-striped\">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011-04-25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011-07-25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009-01-12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012-03-29</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008-11-28</td>
          <td>$162,700</td>
        </tr>
        <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012-12-02</td>
          <td>$372,000</td>
        </tr>
      </tbody>
    </table>
    <script src=\"https://code.jquery.com/jquery-3.6.1.min.js\"></script>
    <script src=\"//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js\"></script>

  </body>

  </html>
</body>

</html>

请发布minimal reproducible example。您可以使用Stack Snippet 使其可执行。
@Barmar - jsbin.com/badopohino/edit?html,js,output 谢谢
在此处发布，而不是在外部站点。这就是我们有 Stack Snippet 的原因。
我将您的代码添加到 playcode.io 中，而不是 i 我使用了数字 1 或 2，它可以正常工作 playcode.io/974741 我相信您的 i 变量错误
stateLoadParams 函数在过滤器控件添加到 DOM 之前运行。这就是选择器没有找到任何东西的原因。如果您在函数内部设置断点，您将看到控件不在输出窗口中。

标签： jquery jquery-selectors

【解决方案1】：

设法通过在stateLoadParms 方法中保存过滤器数据，然后在initComplete 方法中循环它们并将所选值设置为下拉列表来解决此问题。没有测试下面的代码，但我缺少的是 Jquery 选择器在表格单元格中找不到下拉元素，因为它们稍后被添加到 DOM，正如上面@Barmar 所指出的那样。

var filterData = [];
$('#example').DataTable({
  orderCellsTop: true,
  stateSave: true,
  initComplete: function() {
    this.api()
      .columns([1, 2])
      .every(function(index) {
        var column = this;
        var select = $('<select class="form-control form-control--filter"><option value=""> -- Filter -- </option></select>')
          .appendTo($('thead tr:eq(1) td:eq(' + this.index() + ')'))
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        var option;
        column.data().unique().sort().each(function(d, j) {
          if (!d == '') {
            option = $('<option value="' + d + '">' + d + '</option>');
            if (d == filterData[index]) {
              option.prop('selected', true);
            }
            select.append(option);
          }
        });

      });
  },
  stateLoadParams: function(settings, data) {
    data.columns.forEach(function(col, i) {
      filterData.push(col.search.search);
    });
  }
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <title>JS Bin</title>
  </head>

  <body>
    <table id="example" class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011-04-25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011-07-25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009-01-12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012-03-29</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008-11-28</td>
          <td>$162,700</td>
        </tr>
        <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012-12-02</td>
          <td>$372,000</td>
        </tr>
      </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

  </body>

  </html>
</body>

</html>

【讨论】：