获取即时DOM结构之外的特定元素

Get a particular element outside the immediate DOM structure

本文关键字：元素 DOM 结构 获取      更新时间：2023-09-26

这是标记

  <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单击sectionfooterdiv中的保存更改按钮时，我想访问sectionheaderdiv中h3标记中的文本。如果他们和在同一个div中，我可以得到它

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

但现在他们不是我进步的方式。谢谢你们

ps。我不能使用id，整个部分对不同的条目重复pps。我是jquery的新手。

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

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

小提琴示例：

http://jsfiddle.net/oahaho82/

这可能会有所帮助。Js Fiddle

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

因为您通过循环创建标记，所以可以向标记添加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);
});
相关文章：