Руководство jQuery - child(parent, child)

Опубликовано admin - вт, 05/01/2018 - 23:40

[Селектор] child(parent, child)

Раздел "Selectors"

Выбрать все элементы являющиеся 'детьми' для элементов, определенных как 'родительские'.

Параметры

child(parent, child)

1.0

parent: любой доступный селектор.

child: селектор подходящего элемента, который является элементом "ребёнком" первого селектора.

Пример

Родительский элемент > дочерний элемент

Примеры

Пример:

Найти все элементы, являющиеся «детьми» элементов с id "main".

Пример
Весь код

"jQuery"

$("#main > *").css("border", "3px double red");

"HTML"

<span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>

"CSS"

  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px;
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" 
	rel="stylesheet" type="text/css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	
$("#main > *").css("border", "3px double red");

	  });
	</script>

	</head>
	<body class="iframe">

	
<span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>


	</body>
	</html>

	
	<style>
	
  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px;
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }

	</style>

Метод появился в jQuery 1.0 (http://api.jquery.com/child/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты