如何在jQuery中直接将函数附加到ID？

Question

我有一个表格，必须多次显示相同的table thead。我认为解决方案是在单个函数中编写thead，然后在项目中的任何位置调用该函数。为此，我编写了一个函数：

function commonStructure() {
  return append('<thead>
    <tr>name</tr>
    <tr><address></tr>');
  }

我试图像这样调用此函数：

$('#classA').commonStructure();

这对我不起作用。请为同一问题帮助我。

Answer 1

您的commonStructure函数与jQuery无关。如果要在jQuery对象上调用它，则需要将其创建为插件。从那里，您需要修改append()函数以处理jQuery对象中包含的元素。如果您要做的只是将内容添加到DOM，则可以使用jQuery自己的append()方法。

值得注意的是，JS字符串不能包含换行符。可以将它们连接成多行，也可以使用模板文字（如以下示例所示）。此外，您的HTML无效。 thead的内容需要放在td内的tr单元格中。

将它们放在一起应该看起来像这样：

$.fn.commonStructure = function() {
  return this.append(`<thead>
    <tr><td>name</td></tr>
    <tr><td>address</td></tr>
  </thead>`);
};

$('#foo').commonStructure();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="foo"></table>

Answer 2

$('#classA')，返回jQuery对象，因为您的方法不存在于jQuery方法中，所以它不起作用。

解决方法是将您的fn附加到jQuery原型$。fn如下

$.fn.commonStructure = function() {}

上述原型方法将可用于创建的每个实例

并且可以如下使用

$('#foo').commonStructure();