Javascript 附加到最近的选择

我想将DataTable中的函数附加到最近的select筛选器。我怎样才能做到这一点？我的函数工作正常，但所有选择都应用于同一个表（第一个表）

我的函数代码如下所示：

$('#table1, table2, table3').dataTable({
    initComplete: function() {
        var column = this.api().column(0); 

        var select = $('<select class="filter"><option value=""></option></select>')
          .appendTo('#selectTriggerFilter')
          .on('change', function() {
            var val = $(this).val();
            column.search(val).draw()
          });
    }
} );

但它并没有真正起作用

---

提前感谢

首先请注意，您的HTML无效，因为您多次重复相同的

id

，而它们必须是唯一的。将

selectTriggerFilter

更改为类

关于这个问题，

initComplete

处理程序函数中的

此

将引用调用了

dataTable（）

的

表

元素。因此，您需要使用

prev（）

来获取同级

。选择TriggerFilter

元素，而不是“最近的（）”，因为它会查找子节点。试试这个：

过滤器：



过滤器：

$（'#表1、表2、表3'）。数据表({
initComplete:function（）{
var column=this.api（）.column（0）；
var$targetFilter=$（this.prev（'.selectTriggerFilter'）；
变量选择=$（“”）
.appendTo（$targetFilter）
.on（'change'，function（））{
var val=$（this.val（）；
column.search（val.draw）（）
});
}
});

我假设您有多个表，每个表都有

。问题是当您执行

.appendTo（'selectTriggerFilter'）

时，选择器将在整个HTML文档中找到第一个

\selectTriggerFilter

，并将其附加到该文档中，这将是第一个表的筛选器div

我的方法如下

HTML:

过滤器：
...

Javascript:

initComplete: function() {
    var column = this.api().column(0);
    var target = $(this).closest('.table-wrapper')
        .find('.select-filter-trigger');

    var select = $('<select class="filter"><option value=""></option></select>')
        .appendTo(target)
        .on('change', function() {
            var val = $(this).val();
            column.search(val).draw()
        });
}

initComplete:function（）{
var column=this.api（）.column（0）；
var target=$（this）.closest（'.table wrapper'）
.find（'.select过滤器触发器'）；
变量选择=$（“”）
.appendTo（目标）
.on（'change'，function（））{
var val=$（this.val（）；
column.search（val.draw）（）
});
}

我想筛选同一视图中的许多表。我刚刚更新了我的代码，使它更清晰谢谢你的编辑。我在下面为您添加了一个答案

var $filter = $(this).closest("#selectTriggerFilter");

<div class="table-wrapper">
    <p class="select-filter-trigger"><label><b>FILTER:</b></label></p>
    <table class="table table-hover dataTable">
        ...
    </table>
</div>

initComplete: function() {
    var column = this.api().column(0);
    var target = $(this).closest('.table-wrapper')
        .find('.select-filter-trigger');

    var select = $('<select class="filter"><option value=""></option></select>')
        .appendTo(target)
        .on('change', function() {
            var val = $(this).val();
            column.search(val).draw()
        });
}