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

问题是因为您的 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