Get a particular element outside the immediate DOM structure

Question

Here is the markup

  <div class='section_body'>
      <div class='section_header'>
          <h3>The header</h3>
      </div>
      <div class='section_body'>
         <input type='text' name='qty[]'> ::::> <input type='text' name='amt[]'> 
      </div>
      <div class='section_footer'>
         <button class='saveChanges'>Save Changes</button> 
      </div>
  </div>

i want to access the text in the h3 tag in the section_header div when i click the save changes button in the section_footer div with jquery. I can get it if they are in the same div with

      $('.saveChanges').click(function(){
          $(this).siblings('h3');
       });

but now they aren't how do i progress. Thanks y'all

ps. I can't use id, the whole section is repeated for different entries pps. i am new to jquery.

Answer 1

You can get the parent div using closest() and then get h3 using find() :

$('.saveChanges').click(function () {
    alert($(this).closest(".section_body").find(".section_header h3").text());
});

FIDDLE EXAMPLE:

http://jsfiddle.net/oahaho82/

Answer 2

May be this can help. Js Fiddle

$('.saveChanges').click(function(){
          var parent = $(this).parent().parent();
          alert($('h3', $('.section_header', parent)).text());
});

Answer 3

Because you are creating the markup via a Loop, you can add an ID to the markup.

Using a loop to generate the markup could look something like this (a very simplistic example):

var mydiv;
for (var i = 1; i <=3; i++) {
    mydiv += "<div id='outerdiv-";
    mydiv += i + "' class='section_body'><div id='divheader-" + i + "' class='section_header'>";
    mydiv += "<h3 id='h3-" + i + "'>The header</h3></div>";
    mydiv += "<div id='divinput-" + i + "' class='section_body'>";
    mydiv += "<input id='inptqty-" + i + "' type='text' name='qty[]'> ::::> ";
    mydiv += "<input id='inptamt-" + i + "' type='text' name='amt[]'></div>";
    mydiv += "<div id='divftr-" + i + "' class='section_footer'>";
    mydiv += "<button id='btnsave-" + i + "' class='saveChanges'>Save Changes</button></div>";
    mydiv += "</div>";
}

$('#holder-div').html(mydiv);

Here is the JSFiddle

With that in mind, I would alter the markup to make the H3 tag specific:

<div class='section_body'>
      <div class='section_header'>
          <h3 id='h3-1'>The header</h3>
      </div>
      <div class='section_body'>
         <input type='text' name='qty[]'> ::::> <input type='text' name='amt[]'> 
      </div>
      <div class='section_footer'>
         <button class='saveChanges'>Save Changes</button> 
      </div>
  </div>

Then your function could be something like this:

$('.saveChanges').click(function() {
    var nm = $(this).attr('id')
    nm = nm.slice(nm.indexOf('-'));
    var hdr = $('#h3' + nm).html();
    console.log(hdr);
});