CODEWITHSUNDEEP
jqueryhtml
matt lao
matt lao

Reputation: 361

JQuery parent selector, whats the point?

ok I have a question about the .parent selector, basically I'm trying to select the p element thats only inside the .selected div class. I have two ways of trying to do this: 

  $( "p" ).parent( ".selected" ).css( "color", "yellow" );

  $( ".selected" ).css( "color", "yellow" );

commenting one out and trying the other does the SAME EXACT THING, so my question is, what is the difference between these two ways of selecting? and how do I select an element, in this case the 'p' tag, that is only inside the div with class 'selected'

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>parent demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>

  <div><h1>Hello</h1></div>
  <p>kajdsfdfhkjdsahfdfhjk</p>


  <div class="selected">

    <h1>Hello Again</h1>
  <p>ldjflksjflkdsajf</p>

  </div>

  <script>
  // $( "h1" ).parent( ".selected" ).css( "color", "yellow" );
  $( "p" ).parent( ".selected" ).css( "color", "yellow" );
  $( ".selected" ).css( "color", "yellow" );
  // $( "p" ).css( "color", "yellow" );
  </script>

  </body>
  </html>

Upvotes: 0

Views: 241

Answers (3)

invinciblejai
invinciblejai

Reputation: 1293

there are different ways in which jquery selector can be used. But should go with the one which is most efficient.

in this case :

$( "p" ).parent( ".selected" ).css( "color", "yellow" );

first jquery searches whole DOM with P element , than looks for parent with class 'selected' than apply the style .It's not that efficient.

$( ".selected" ).css( "color", "yellow" );

it looks for wherever class 'selected' is present apply style to it. it's efficient than previous one , but it applies to all elements with class selected (in case you have few other elements with same class). so will not exact desired output in such cases.

$('.selected').find('p').css( "color", "yellow" );

above looks for all elements with class selected than finds 'p' in that and apply styles.

and in your case it can be handled with css as well no need to use jquery. i.e

.selected p{} // in case all p elements needs to be styled

.selected >p{} // in case only first p element needs to be styled

Upvotes: 3

Sam
Sam

Reputation: 4484

.parent() is used to get to the parent of the selected div. You will find it useful in a lot of cases when let's say based on a button click, you want to remove the entire parent div. Now this is just example, there are lot many cases where you will refer the parent of a selected jQuery element.

In your case, there are some ways to achieve this -

a) If you want to select any child p tags (doesn't matter the hierarchy) inside .selected, use find()

$(".selected").find("p")

This gives you the reference of p, if exists. Then you can go to parent.

b) A much straightforward way to select immediate child elements is by using css selector >

$(".selected > p")

This gives you reference of parent directly.

Upvotes: 0

Ted
Ted

Reputation: 14927

All you need is this to do it with jQuery:

$( ".selected p" ).css( "color", "yellow" );

or if it's ok to simply use CSS

.selected p{
    color:yellow;
}

The 'point' of a parent selector is, well, to get the parent of an element. In this case, I don't think you need it at all. now if the selected class was on a div inside the element you wanted to change, then .parent() would be appropriate.

Upvotes: 2

Related Questions