How to access child of parent in jQuery

Trying to get the child of a parent through a child accessor. Basically trying to get the .block__id through the add__block class.

HTML

<div class="col-12">
    <span class="block__id">{{$block->id}}</span>
          {{$block->title}}
     <span class="add__block">+</span>
</div>

jQuery

$(".add__block").click(function(){
    $(this).parent().find(function(){
          var id = $(".block__id").text();
    });
    console.log(id);
});

Currently I get id not defined.

Your logic is almost correct, but the issue is that you're providing a function to find() whereas you simply need to use a selector string:

$(".add__block").click(function() {
  var id = $(this).parent().find(".block__id").text();
  console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <span class="block__id">Block #1</span> 
  Block title
  <span class="add__block">+</span>
</div>
<div class="col-12">
  <span class="block__id">Block #2</span> 
  Block title
  <span class="add__block">+</span>
</div>

The parents () is an inbuilt method in jQuery which is used to find all the parent elements related to the selected element. This parents () method in jQuery traverse all the levels up the selected element and return that all elements. Here selector is the selected element whose all parent need to find.

I'm not very familiar with jQuery, but with vanilla Javascript this is very easy:

const blocks = document.querySelectorAll('.add__block');

for (const block of blocks) {
  block.addEventListener('click', (e) => {
    console.log(e.target.previousElementSibling.textContent)
  })
}
<div class="col-12">
    <span class="block__id">{{$block->id}}</span>
          {{$block->title}}
     <span class="add__block">+</span>
</div>

The parent () method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents () or the parentsUntil () method. Tip: To traverse a single level down the DOM tree, or all the way down to the last descendant (to return children or other descendants), use the children () or find () method.

Another alternative is just looking for the sibling with prev method, which might be slightly faster than going to parent and then search from there.

$('.add__block').click(function(){
    var id = $(this).prev('.block__id').text();
    console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
  <span class="block__id">Block #1</span> 
  Block title
  <span class="add__block">+</span>
</div>
<div class="col-12">
  <span class="block__id">Block #2</span> 
  Block title
  <span class="add__block">+</span>
</div>

If you want to select the child depending on the parent of it. You should use it like this parent child { // properties here In your case it would be like this

Can you try like below:

$(".add__block").click(function(){        
    var id = $(".block__id").text();
    console.log(id);
});

jQuery ("parent > child") The $ ("parent > child") selector selects all direct child elements specified by "child" of elements specified by "parent". Example, when click on a button, places a border around all list items that are children of <ul class="clsul">.

On click you can find the parent of the .add__block element and find the relevant .block__id within the parent as follows,

$(".add__block").click(function(){
    console.log($(this).parent().find(".block__id").text(););
});

The children () method returns all direct children of the selected element. The DOM tree: This method only traverse a single level down the DOM tree. To traverse down multiple levels (to return grandchildren or other descendants), use the find () method. Tip: To traverse a single level up the DOM tree, or all the way up to the document's root element (to return parents or other ancestors), use the parent () or parents () method.

Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements. This method is similar to .parents(), except .parent() only travels a single level up the

Jquery executes the function from the child window in the parent window I have a popup window and I want to run a function from in the parent window. In the child I have: $(document).ready(function(){ parent.$.fn.guestFromPop('Action'); }); In the parent I have: $(document).ready(function(){ function guestFromPop(data) {

In order for my child web page to access the DOM of the parent web page, I first write the JavaScript codes to get the window object of the parent web page. 1 var parentWindow = window.opener; A call to window.opener from the child web page returns the window object of the parent web page that launches it.

Comments
  • @pravid it's already in the question...?
  • This is perfect.. thanks, but i have to accept the jquery version.
  • Note that this selects all the .block__id elements, not just the one related to the clicked .add__block element.