Question about parent and children function in jQuery

Question about parent and children function in jQuery
0

#1

So these two functions basically give i.e. a color of element to the element thats above or bellow it?
for example if i have h2 with color red, and use i.e. parent it will give color red to element above it? Same goes for children functions but it gives i.e. color to the element bellow it? Did i understand this well?


#2

@Bego96,
$.parent() and $.children() do not deal with styling of parent/child elements.
They return either the parent element or the children elements of the element you activate the method on.
Would recommend you read up on them below.

https://api.jquery.com/parent/

https://api.jquery.com/children/


#3

Do you have example code of what you are trying to do with these functions? Maybe we can help you better if we knew what code you are trying to understand.


#4

Here


#5

But parent() has still given element above a color of element thats bellow it, and i checked those links and read it, it basically says it turns to the elements ancestors, so if i that element has a color of red and use parents function for example it will give elements that are above it color red all the way up to beggining from my understanding, same goes for children function, where as parent functions will give color red to only an element thats above it and nothing else. Now i understand its not for styling, but from my understanding it gives other elements that are above it or bellow it same color or different color for example? It can give them other styles and perhaps functions?


#6

Yes, you seem to understand the concepts now that we can see the context of how you were using them.


#7

Ok but can you please explain me this part: “Every HTML element has a parent element from which it inherits properties.” It says that element inherits properties from its parent element (the one above it) so how is that we gave a parent element a color? Isnt it other way around? element gives a property to its parent element? I need a bit more explanation in this one.


#8

I will use the following base code below to explain what is happening with various calls.

<!doctype html>
<html>

<head>
  <style>
    #the-parent-div {
      color: red;
    }
  </style>
</head>

<body>
  <div id="the-parent-div">
    Some Parent Text
    <div id="the-child-div">
      Some Child Text
    </div>
  </div>
</body>
<html>

If we start with the above code, the css in the style section defines the text color of the div with id=“the-parent-div” to be “red”. The nested div with id=“the-child-div” inherits the properties of it’s parent (“the-parent-div”), so this “child” element will also have text color of “red” also.

Now if we add the jQuery library and use the jQuery funtion parent, we can change the text color of the parent of the div with id=“the-child-div” to “red” like below. You will also notice, the child’s text changes to the color “red” also, because of inheritance.

<!doctype html>
<html>

<head>
  <style>
    #the-parent-div {
      color: green;
    }
  </style>
</head>

<body>
  <div id="the-parent-div">
    Some Parent Text
    <div id="the-child-div">
      Some Child Text
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
       $("#the-child-div").parent().css("color","red");
    });
  </script>
</body>
<html>

#9

This seems pretty complicated to me, im just getting more confused. Is this function important in making websites?


#10

If you ever wanted to use JavaScript to target the parents of elements of a certain type or class or id, then it would be useful to understand how to use the function. Which part of what I showed you above does not make sense? I will try my best to help you understand.


#11

I think i actualy understand. Since you have color green in style you didnt close div of parent so div with child also has green text, but once you used parent function in jquery and set the color to red then both parent and child have red text now. So do we only use background color for parent, parents or child functions? Does it work if you actually closed parent div? So if we have selected in a picture i posted above target 1 or 2 or 3 it will change background color of div well only? It doesnt work if we selected target 3 and used parent function so target 2 will change its color?


#12

And one more thing, this functions only work if elements are nested?


#13

The parent function just selects the parent div. The css function after the parent() is the function that let’s you change ANY css property (background-color, color, etc…) of the element selected.


The parent div is closed. It is the 2nd/last </div> tag you see in the body section of the document.


In the code below in the screenshot you provided, the $("#target") part selects the button with id=“target1”, then the .parent() selects the parent of this button which is the div with id=“left-well”. So at this point, we have selected the div with id=“left-well”, so when we use the css(“background-color”, “red”) part, we are changing the background color of the div with id=“left-well” to the color “red”.

$("#target1").parent().css("background-color", "red");

I am not exactly sure what you are asking with this question. Can you post some example code and then ask why it does or does not do what you expect?


#14

So it basicaly only works for nested elements? What i meant about target 3 and 2 if you look at picture above i posted you will notice button target 1, button target 2, button target 3 so what i wanted to ask is if we use $("#target3’). parent(). css( " color ", " red "); it wont change color of button target 2 above it? Instead it will still change color of left well because they are nested with left well?


#15

Yes, I think you understand now.