Jquery добавить элемент, если нет

Я читаю книгу по jQuery, и у нее есть несколько простых задач и примеров.

Я пытаюсь добавить элемент в таблицу, но только если элемент еще не присутствует.

Таблица такова:

<table border="1" cellspacing="0">
  <tr>
    <td>Spaghetti</td>
    <td>Karl</td>
  </tr>
  <tr>
    <td>Pasta</td>
    <td>David</td>
  </tr>
</table>

Проблема в том, что нам не разрешено добавлять классы или идентификаторы.

Идея состоит в том, чтобы добавить подпись. И, конечно, если кнопка нажата 2 раза, не добавляется вторая подпись.

Я пробовал это:

if(!jQuery.contains('table','caption')) {
    $('table').append('<caption>Orders</caption>');
}

И этот

if(!($("table:contains('caption')"))) {
    $('table').append('<caption>Orders</caption>');
}

Но никто не работает. Я прочитал jQuery api о функциях и селекторах, я думал, что они будут работать, но они этого не делают. Что мне нужно сделать?

Ответ 1

Вы можете сделать это без инструкции if(), если хотите:

$('table:not(:has(caption))').prepend('<caption>Orders</caption>');

Здесь используется not-selector ^(docs) и has-selector ^(docs), чтобы выбрать элементы <table>, у которых нет вложенных <caption>.

Он также использует метод prepend() ^(docs), чтобы дать более ожидаемое размещение в DOM. Это не повлияет на фактическое отображение на странице.

Ответ 2

Это должно работать

if($("table caption").length === 0) {
  // append caption
}

Вызов jQuery возвращает все элементы заголовка, присутствующие внутри всех элементов таблицы. .length возвращает количество элементов. Если это 0, добавьте подпись.