獲取直接DOM結構之外的特定元素

Question

這是標記

  <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>

當我使用jquery單擊section_footer div中的保存更改按鈕時，我想訪問section_header div中的h3標簽中的文本。 如果他們在同一個div中，我可以得到它

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

但現在他們不是我的進步。 謝謝你們

PS。 我不能使用id，對於不同的條目pps重復了整個部分。 我是jquery新手。

Answer 1

您可以使用closest()獲取父div，然后使用find()獲取h3 ：

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

范例：

http://jsfiddle.net/oahaho82/

Answer 2

可能這會有所幫助。 提斯

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

Answer 3

由於您是通過循環創建標記的，因此可以向標記添加ID。

使用循環生成標記可能看起來像這樣（一個非常簡單的示例）：

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);

這是JSFiddle

考慮到這一點，我將更改標記以使其特定於H3標簽：

<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>

然后您的函數可能是這樣的：

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