parent

« Обратно к списку traversing-функций

[редактировать]

parent( [выражение] )

Получает прямого «родителя» элемента. Если вызывается для набора элементов, то функция возвращает набор их прямых родительских объектов. Также можно использовать выражение, чтобы дополнительно отфильтровать набор элементов. Если ни одного родительского объекта не было найдено, то возвращается объект jQuery нулевой длины.

Для получения всех родительских объектов воспользуйтесь closest или parents.

Аргументы:

выражение (необязательно) Строка
Выражение для дополнительной фильтрации элементов.
Примеры:

Показывает «родителя» каждого элемента как (родитель > потомок).
    $("*", document.body).each(function () {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $("*", document.body).each(function () {
      var parentTag = $(this).parent().get(0).tagName;
      $(this).prepend(document.createTextNode(parentTag + " > "));
    });

  });
  </script>

  <style>
  div,p { margin:10px; }
  </style>
</head>
<body>
  <div>div,
    <span>span, </span>

    <b>b </b>
  </div>
  <p>p,
    <span>span,
      <em>em </em>

    </span>
  </p>
  <div>div,
    <strong>strong,
      <span>span, </span>
      <em>em,
        <b>b, </b>

      </em>
    </strong>
    <b>b </b>
  </div>
</body>
</html>
Поиск «родителя» каждого параграфа имеющего класс «selected».

$("p").parent(".selected").css("background", "yellow");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("p").parent(".selected").css("background", "yellow");
  });
  </script>

</head>
<body>

  <div><p>Hello</p></div>
  <div class="selected"><p>Hello Again</p></div>

</body>

</html>
Name Type