jQuery селектор :parent

Определение и применение

jQuery селектор :parent выбирает все элементы, которые имеют по крайней мере один дочерний узел (элемент или текст).

jQuery синтаксис:

JavaScript

$(":parent")

Добавлен в версии jQuery

1.0

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

Пример использования

Селектор :parent — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<table>
  <tbody>
    <tr>
      <td>Not empty</td>
      <td></td>
      <td>Not empty</td>
    </tr>
    <tr>
      <td>Not empty</td>
      <td>Not empty</td>
      <td>Not empty</td>
    </tr>
    <tr>
      <td>Not empty</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

main.js

JavaScript

$(document).ready(function () {
    $('td:empty').css('background-color', 'red') // выбираем пустые ячейки таблицы
    $('td:parent').css('background-color', 'green') // выбираем не пустые ячейки таблицы
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :empty мы выбрали и стилизовали все ячейки данных таблицы (элементы <td>), а с помощью селектора :parent, который является противоположностью селектора :empty, выбрали и стилизовали ячейки таблицы, которые содержат текстовую информацию (не пустые).