Как добавить функцию непосредственно к идентификатору в jQuery?

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() - хотя prepend() будет иметь больше смысла, когда вы пытаетесь создать заголовок.

Стоит также отметить, что строки JS не могут содержать разрывы строк. Либо объедините их в несколько строк, либо используйте шаблонные литералы (как в следующем примере). Кроме того, ваш HTML недействителен. Содержимое thead необходимо поместить в ячейки td внутри tr.

Собрав все это вместе, оно должно выглядеть примерно так:

$.fn.commonStructure = function() {
  return this.prepend(`<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 class="foo"></table>
<table class="foo"></table>