如何仅将HTML附加到类选择的当前元素

时间:2014-08-09 08:47:26

标签: jquery html

在我的实际案例中,我的表格中有四个<table>个对象位于<div>内,style="display: none"就像这样&#34;

<div id="person-info-table" style="display: none">
    <hr />
    <div>Personal info</div>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="personInfoGrid">
    //..


<div id="associates-table" style="display: none">
    <div>Associates info</div>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="associatesGrid">
    //..

等等。

在某些情况下,我想加载此表格并显示我为每个表格分别Ajax调用所做的内容:

 success: function (data) {
              if (data > 0) {
                  $("#person-info-table").show();
                  $('#personInfoGrid').MydataTable();
              }
          }

我在这里使用自己jquery DataTable的扩展名,但我认为这对我遇到的问题没有任何影响。对于每个新的DataTable,我都会添加一个自定义Clear filters按钮,如下所示:

$('.dataTables_length').append("<button class='btnClearFilter' onclick='..'>Clear</button>");

但是当我加载了多个表时,例如3,最终结果是第一个表有3个按钮|Clear| |Clear| |Clear|第二个表|Clear| |Clear|和las |Clear|只有一个。我试图在这个JSFiddle示例中尽可能多地重新创建我现在所获得的内容。在我的原始代码中,我试图获得我正在使用的当前元素:

$($(this.selector).find(".dataTables_length")).append(--My HTML--);

在控制台中没有产生错误,但我也没有在任何一张桌子上呈现任何内容。我尝试了各种方法尝试将所需的HTML仅添加到我正在使用的当前元素中,因为在我看来这是问题(蚂蚁解决方案)但我不能找到成功的方法。

1 个答案:

答案 0 :(得分:2)

正如您在示例中所示,您正在使用:

$('#parent').append('<div class="active"></div>');
$('div.active').append('<button>New Button</button>');

您将所有元素div元素追加到活动类,因此当您向DOM添加更多元素时,JQuery会在更多元素上执行您的函数。

使用类似的东西:

var table = $('#person-info-table').find('table');

initialise($table);

function initialise($table){

$(table).find('.dataTables_length').append("<button class='btnClearFilter' ...

}