prev()

.prev( [ selector ])

מחזירה: jQuery

תיאור: מחזיר את אחיו מייד הקודם של כל אלמנט בסט אלמנטים בהתאמה, מסוננים אופציאונלית על ידי הסלקטור.

.prev( [ selector ] )

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

selector

מחרוזת, המכילה ביטוי לבחירת אלמנטים בהתאמה.

אובייקט jQuery הנתון מציג סט אלמנטים של DOM, שיטה .prev() מאפשרת לנו לחפש בין אבות קדמונים של אלמנטים האלה בעץ DOM וליצור אובייקט חדש של jQuery מאלמנטים בהתאמה.

שיטה מקבלת אופציאונלית ביטוי בחירה מאותו סוג, שאנחנו יכולים להעביר לתוך הפונקציה $(). אם סלקטור מסופק, אלמנטים יסוננו על ידי בדיקה להתאמה אליו.

נתבונן על דף עם רשימה פשוטה:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

אם נתחיל מפריט שלישי, נוכל למצוא אלמנט שנמצא מייד לפניו:

$('li.third-item').prev().css('background-color', 'red');

תוצאה של קריאה הזו היא רקע אדום עבור פריט 2. מכיוון שאנחנו לא מספקים ביטוי בחירה, פריט הזה שבא לפני נכלל באופן חד משמעי כחלק של האובייקט. אם היינו מספקים ביטוי בחירה, אלמנט יבחן להתאמה לפני שנכלל לתוך האובייקט.

דוגמאות

דוגמה 1

מחפש אלמנט הקרוב קודם עבור כל אלמנט div.

    var $curr = $("#start");
    $curr.css("background", "#f99");
    $("button").click(function () {
      $curr = $curr.prev();
      $("div").css("background", "");
      $curr.css("background", "#f99");
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    var $curr = $("#start");
    $curr.css("background", "#f99");
    $("button").click(function () {
      $curr = $curr.prev();
      $("div").css("background", "");
      $curr.css("background", "#f99");
    });

  });
  </script>

  <style>

  div { width:40px; height:40px; margin:10px;
        float:left; border:2px blue solid; 
        padding:2px; }
  span { font-size:14px; }
  p { clear:left; margin:10px; }
  </style>
</head>
<body>
  <div></div>
  <div></div>

  <div><span>has child</span></div>

  <div></div>
  <div></div>
  <div></div>

  <div id="start"></div>
  <div></div>

  <p><button>Go to Prev</button></p>
</body>

</html>

נסה זאת בעצמך

דוגמה 2

מחפש אלמנט הקרוב קודם של כל פסקה שיש לו class 'selected' .

$("p").prev(".selected").css("background", "yellow");

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

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

  
</head>
<body>
  <div><span>Hello</span></div>

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

  <p>And Again</p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

prev()

.prev( [ selector ])

.prev( [ selector ] )

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות