24
Дек
2012

.addBack()

.addBack( [selector ] )Returns: jQuery

Description: Add the previous set of elements on the stack to the current set, optionally filtered by a selector.

Как описано в обсуждении .end(), объекты jQuery поддерживают внутренний стек, который отслеживает изменения в соответствующем наборе элементов. Когда вызывается один из методов обхода DOM, новый набор элементов помещается в стек. Если предыдущий набор элементов желателен, .addBack()может помочь. Consider a page with a simple list on it:
1
2
3
4
5
6
7
<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>
The result of the following code is a red background behind items 3, 4 and 5:
1
2
$( "li.third-item" ).nextAll().addBack()
.css( "background-color", "red" );
First, the initial selector locates item 3, initializing the stack with the set containing just this item. The call to .nextAll() then pushes the set of items 4 and 5 onto the stack. Finally, the .addBack() invocation merges these two sets together, creating a jQuery object that points to all three items in document order: {[<li.third-item>,<li>,<li> ]}.

Example:

The .addBack() method causes the previous set of DOM elements in the traversal stack to be added to the current set. In the first example, the top stack contains the set resulting from .find("p"). In the second example, .addBack() adds the previous set of elements on the stack — in this case $("div.after-addback") — to the current set, selecting both the div and its enclosed paragraphs.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addBack demo</title>
<style>
p, div {
margin: 5px;
padding: 5px;
}
.border {
border: 2px solid red;
}
.background {
background: yellow;
}
.left, .right {
width: 45%;
float: left;
}
.right {
margin-left: 3%;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="left">
<p><strong>Before <code>addBack()</code></strong></p>
<div class="before-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<script>
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );
// First Example
$( "div.before-addback" ).find( "p" ).addClass( "background" );
// Second Example
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
</script>
</body>
</html>

Demo:

Share

Тебе может это понравится...