728x90
SMALL
#jQuery
#jQuery/Method/.add() - method to select more elements
.add()
.add() is used to select additional elements.
Grammar
.add( selector )For example
$( 'ul' ).add( 'p' )
selects the ul element, which in turn selects the p element.
Example 1
Select the li element, select the p element, and set the color to red.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'li' ).add( 'p' ).css( 'color', 'red' );
} );
</script>
</head>
<body>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
<p>Dolor</p>
</body>
</html>Example 2
When you hover the mouse over the first li element (Lorem), the color of the first li element (Lorem) and the paragraph (Dolor) becomes red.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
li { cursor: pointer; }
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'li.la' ).hover( function() {
$( this ).add( 'p' ).css( 'color', 'red' );
}, function () {
$( this ).add( 'p' ).css( 'color', 'black' );
} );
} );
</script>
</head>
<body>
<ul>
<li class="la">Lorem</li>
<li class="lb">Ipsum</li>
</ul>
<p>Dolor</p>
</body>
</html>TIP.
Use .addBack() to select the previously selected element along with the currently selected element.
728x90
LIST