parent > child

סלקטור ילד

תיאור: בוחר את כל האלמנטים שצוינו כי "ילד" מאלמנטים שצוינו כי "הורה".

jQuery('parent > child')

הוספה בגרסה: 1.0

parent

אלמנט

כל סלקטור חוקי.

child

אלמנט

סלקטור עבור סינון אלמנטים הילד.

כמו סלקטור CSS, סלקטור הילד נתמך על ידי כל הדפדפנים המובילים, כולל Safari, Firefox, Opera, Chrome, ו- Internet Explorer 7 ומעלה, אבל לא נתמך על ידי Internet Explorer 6 ומטה. עם זאת, סלקטור הזה (יחד עם כל האחרים) עובד בכל הדפדפנים הנתמכים, כולל IE6.

סלקטור הילד (E > F) אפשר להיחשב כי צורה ספציפית של סלקטור צאצא (E F) בכך שהוא בוחר רק צאצאים ברמה הראשונה.

דוגמאות

דוגמה 1

מחפש כל ילדים של אלמנט עם "main" id , הוא בצבע צהוב.

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

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("#main > *").css("border", "3px double red");
  });
  </script>
  <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>
</head>
<body>
  <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>

נסה זאת בעצמך

דוגמה 2

ממקם גבול מסביב כל אלמנטים ברשימה שהם ילדים של <ul class="topnav">.

$("ul.topnav > li").css("border", "3px double red");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-size:14px; }
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        $("ul.topnav > li").css("border", "3px double red");
     });
  </script>
</head>
<body>
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2 
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

parent > child

סלקטור ילד

jQuery('parent > child')

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

תגובות