Question

我有以下有效的代码：

let clear_button = $(' <a href="#" class="small text-secondary mr-2 d-none" title="Clear"><i class="fa fa-times"></i></a>').click(function () {
    filter_input.val('');
    search_button.click();
    clear_button.addClass('d-none');
});
let search_button = $(' <a href="#" class="small text-secondary" title="Search"><i class="fa fa-search"></i></a>').click(function () {
    self.search(filter_input.val()).draw();
    clear_button.removeClass('d-none');
});

$(document).keypress(function (event) {
    if (event.which === 13) {
        search_button.click();
    }
});

$('#' + settings.nTable.id + '_filter').append(clear_button, search_button);

但是，我想将两个按钮都放在div中并将其附加。

我已经尝试过了：

$('#' + settings.nTable.id + '_filter').append('<div class="table-search">', clear_button, search_button, '</div>');

这：

let div = '<div class="table-search">' + clear_button + search_button + '</div>';
$('#' + settings.nTable.id + '_filter').append(div);

都没有给出期望的结果。第一个似乎无法正确创建带有按钮的div，第二个似乎显示对象引用而不是div中的实际html。

如何将这两个对象放在div中，然后正确附加？

Answer 1

将对象连接到字符串时，对象被强制转换为字符串-这不是您想要的，您应该将每个对象传递给append。

您应该append将新元素添加到tableSearch div，然后将tableSearch div附加到外部'#' + settings.nTable.id + '_filter'：

const $tableSearch = $('<div class="table-search"></div>')
  .append(clear_button, search_button);
$('#' + settings.nTable.id + '_filter').append($tableSearch);

let clear_button = $(' <a href="#" class="small text-secondary mr-2 d-none" title="Clear"><i class="fa fa-times">clear</i></a>').click(function() {
  console.log('clear clicked');
  filter_input.val('');
  search_button.click();
  clear_button.addClass('d-none');
});
let search_button = $(' <a href="#" class="small text-secondary" title="Search"><i class="fa fa-search">search</i></a>').click(function() {
  console.log('search clicked');
  self.search(filter_input.val()).draw();
  clear_button.removeClass('d-none');
});

$(document).keypress(function(event) {
  if (event.which === 13) {
    search_button.click();
  }
});
const $tableSearch = $('<div class="table-search"></div>')
  .append(clear_button, search_button);

$('body').append($tableSearch);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Inspect me

Answer 2

首先将div创建为jQuery对象，就像创建按钮一样。然后将按钮附加到div。最后将div附加到父对象。

$('#' + settings.nTable.id + '_filter').append($('<div class="table-search"></div>').append(clear_button,search_button))

Answer 3

您可以尝试以下方法：

clear_button.add(search_button).appendTo($('<div class="table-search"></div>').appendTo($('#' + settings.nTable.id + '_filter')));

实时示例：

$(function(){
  $("[b]").click(function(){
     $("[clear_button]").add($("[search_button]")).appendTo($('<div class="table-search"></div>').appendTo($('[dest]')));
     $("[b]").hide();
  });
});

.table-search{
    background-color: #ff0;
    position: relative;
 }
 .table-search:before{
    content:"I am yellow .table-search!";
    position:absolute;
    top:-2;
    right:0;
    font-size: 8pt;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b style='color: #090' clear_button>Clear_Button </b><br/>
<b style='color: #009' search_button>Search_Button </b><br/>
<div style='border: solid 1px #f90; min-height: 40px; min-width: 40px' dest>

</div>
<input type='button' value='Append' b/>

将对象放在div中并追加

3 个答案: