.closest（）。find（）。text（）查找内部文本的多个元素

Question

我正在尝试找到距离点击按钮最近的<h4>。 HTML并不理想，但这是我必须使用的。

var name = $(this).closest('.text-long').find('.intro-text h4').text();

这应找到最近的<h4>内部文本并将其存储在var name中。但是，在某些按钮点击时，它会存储混乱的文本。例如，这是我的HTML：

<div class="text-long">
  <div class="intro-text">
    <h4>29 Melton Road</h4>
    <div>
      <p>
        <button>click me to save</button>
      </p>
    </div>
    <div class="button-slot"><a href="#" class="button">View property</a></div>
  </div>
  <div class="text-long">
    <div class="intro-text">
      <h4>32 York Road</h4>
      <div>
        <p>
          <button>click me to save</button>
        </p>
      </div>
      <div class="button-slot"><a href="#" class="button">View property</a></div>
    </div>

当我点击第一个按钮时，它会将name作为29 Melton Road32 York Road返回，这两个<h4>的明显混合不正确。

您可以通过检查控制台日志在JSFiddle中看到这一点。

https://jsfiddle.net/bzd617jf/2/

我做错了什么？

Answer 1

您的结算div不匹配。顶部<div class="text-long">没有结束</div>，因此它实际上也包含下一个text-long div。修复您的标记对，然后重试。他们应该是：

<div class="text-long">
  <div class="intro-text">
    <h4>29 Melton Road</h4>
    <div>
      <p>
        <button>click me to save</button>
      </p>
    </div>
    <div class="button-slot"><a href="#" class="button">View property</a></div>
  </div>
</div>
<div class="text-long">
  <div class="intro-text">
    <h4>32 York Road</h4>
    <div>
      <p>
        <button>click me to save</button>
      </p>
    </div>
    <div class="button-slot"><a href="#" class="button">View property</a></div>
  </div>
</div>

Answer 2

问题是因为您的HTML格式不正确。 .text-long元素未正确关闭，因此下一个.text-long元素实际上是前者的子元素。这就是为什么单击第一个按钮会返回父项及其所有子项中h4个元素的文本。

要解决此问题，您应该理想地更正HTML。如果你不能这样做，你可以修改jQuery，只选择它在容器中找到的第一个.intro-text元素：

$('body').on('click', '.icon.heart button', function(e) {
    var name = $(this).closest('.text-long').find('.intro-text h4').first().text();
    console.log(name);
});

Updated fiddle

这是带有更正HTML的版本应该是这样的：

<div class="text-long">
    <div class="intro-text">
        <h4>29 Melton Road</h4>
        <div class="col-xs-6 bottom-buffer camera-slot">
            <p class="icon heart">
                <button>click me to save</button>
            </p>
        </div>
        <div class="button-slot"><a href="http://localhost:8888/test-properties/properties/29-melton-road/" class="button base-color full">View property</a></div>
    </div>
</div>
<div class="text-long">
    <div class="intro-text">
        <h4>32 York Road</h4>
        <div class="col-xs-6 bottom-buffer camera-slot">
            <p class="icon heart">
                <button>click me to save</button>
            </p>
        </div>
        <div class="button-slot"><a href="http://localhost:8888/test-properties/properties/32-york-road/" class="button base-color full">View property</a></div>
    </div>
</div>

$('body').on('click', '.icon.heart button', function(e) {
    var name = $(this).closest('.text-long').find('.intro-text h4').text();
    console.log(name);
});

Updated fiddle

Answer 3

这是您需要在Jquery代码中更改的内容

   //localStorage.clear();   
   $('body').on('click', '.icon.heart button', function(e) {
     var name = $(this).parents('.text-long:first').find('.intro-text:first h4').text();
      console.log(name);
   });

Updated Jsfiddle Link