Call 'second child' element using 'first child' element of a common 'parent element' in javascript

Question

$('.child_1').parents('.parent').find('.child_2')

How do I call the above JQuery syntax using core javascript syntax?

I am calling the child_2 using child_1 who has a common parent

score 0 · Answer 1 · answered Sep 14 '17 at 11:20

0

$('.child_1').closest('.parent').find('.child_2');

closest() will get you the first parent that matches the given query string.

answered Sep 14 '17 at 11:20

Catalin Iancu

732
5
17

3

OP is asking how to do this in javascript – Carsten Løvbo Andersen Sep 14 '17 at 11:23
It is javascript of course, and he also included the `jquery` tag, so I think this is appropriate. – Catalin Iancu Sep 14 '17 at 11:26
1

"How do I call the above JQuery syntax using Javascript syntax?" The question is clear – SilverSurfer Sep 14 '17 at 11:26
By JS, he means vanilla JS – Deepansh Sachdeva Sep 14 '17 at 11:27
In my case, i can only provide ID to child_1, and it has to call to child_2 using a parent, both not having any ID – Atul Kumar Sep 14 '17 at 11:35
Then a class approach when the `id` is unknown is correct, like `$('#child_1').closest('.parent').find('.child_2');`, with `#` denoting the id and `.` denoting a class. – Catalin Iancu Sep 14 '17 at 11:38

score 0 · Answer 2 · answered Sep 14 '17 at 11:21

0

You can do like this:

$('.child_1').parents('.parent:first').find('.class:eq(1)');

First notice that I have used :first to determine the proper parent of the child_1. Then, I have put in eq(1) because child counting starts from 0;

answered Sep 14 '17 at 11:21

Himanshu Upadhyay

6,438
1
16
32

3

OP is asking how to do this in javascript – Carsten Løvbo Andersen Sep 14 '17 at 11:22

Deepansh Sachdeva · Answer 3 · 2017-09-14T11:35:35.343

0

Refer to this answer to Get parents of element in JS and then iterate over the parents to get their child using querySelector

var parents = getParents( document.getElementByClassName('.child_1')[0]);
var children = [];

parents.forEach(function (parent) {
    children.push(parent.querySelector('.child_2'));
});

edited Sep 14 '17 at 11:35

answered Sep 14 '17 at 11:22

Deepansh Sachdeva

1,128
8
16

This example was not entirely clear to me. In my case, i can only provide ID to child_1, and it has to call to child_2 using a parent, both not having any ID – Atul Kumar Sep 14 '17 at 11:34
@AtulKumar didn't get what you require – Deepansh Sachdeva Sep 14 '17 at 11:37
The answer is almost complete, but I think you also need a way to specify which parent, by using a class maybe `.parent`, if the id is not available. – Catalin Iancu Sep 14 '17 at 11:45
@CatalinIancu Yes, but according to jQuery provided in question, it is asking for parents, not parent – Deepansh Sachdeva Sep 14 '17 at 11:47
@DeepanshSachdeva close to what you suggested. Yes, I do have to specify which parent I need to go. I guess it is close, but gives an error, parents is not a function. – Atul Kumar Sep 14 '17 at 11:49
I think the function `getParents()` is not a JS standard function, so you need to define what it does. – Catalin Iancu Sep 14 '17 at 11:52
@Catalinlancu that function is from the answer I mentioned in mine answer. – Deepansh Sachdeva Sep 14 '17 at 11:56
@AtulKumar edit the question with the details about what you want to do along with an example. It would help in resolving your issue more quickly. – Deepansh Sachdeva Sep 14 '17 at 13:24

Call 'second child' element using 'first child' element of a common 'parent element' in javascript

3 Answers3