Posts
Select Element Inside
Div
In this topic, we will see how to select elements inside div in jquery. It is very much easy to select element inside the div.
Select Element Inside Div:-
Select Element Inside Div Using ID
In the following example, we will see how to select elements inside the <div> element using its ID. This example has two <div> element and each contains three <p> elements. we will select only the <div> an element which has the ID of “selectMe” and add the CSS style to the inner elements.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#selectMe').find('p').css({'font-family':'Comic Sans MS','background-color':'lightgreen'});
});
</script>
<body>
<div id="demo">
<p>paragraph 1-Demo</p>
<p>paragraph 2-Demo</p>
<p>paragraph 3-Demo</p>
</div>
<div id="selectMe">
<p>paragraph 1-selectMe</p>
<p>paragraph 2-selectMe</p>
<p>paragraph 3-selectMe</p>
</div>
</body>
</html>
|
Output:
paragraph 1-Demo
paragraph 2-Demo paragraph 3-Demo
paragraph 1-selectMe
paragraph 2-selectMe paragraph 3-selectMe |
$(‘#selectMe’).find(‘p’).css({‘font-family':’Comic Sans MS’,’background-color':’lightgreen’}); This line tells jquery to select the element that has the Id of ‘selectMe’ and using find method we can select the inner elements in the selected <div>. Finally using the CSS function, we changed the font and background color.
Select Element Inside Div Using
Class
This example is very much
similar to the above example. In this example, we will see how to select elements
inside div using the class name. This example has two <div> element and
each contains three <p> elements. we will select
only the <div> the element which has the class name of “.selectMe” and adds
the CSS
style to the inner elements.
To select an element using the class name, we should use the jquery class selector
<!DOCTYPE html>
<html> <head lang="en"> <meta charset="UTF-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.selectMe').find('p').css({'font-family':'Comic Sans MS','background-color':'lightgray'}); }); </script> <body> <div class="selectMe"> <p>paragraph 1-selectMe</p> <p>paragraph 2-selectMe</p> <p>paragraph 3-selectMe</p> </div> <p>paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> </div> </body> </html> |
Output:
paragraph 1-selectMe
paragraph 2-selectMe
paragraph 3-selectMe
paragraph 1paragraph 2-selectMe
paragraph 3-selectMe
paragraph 2
paragraph 3
Post A Comment:
0 comments: