Question

我正在尝试将<h4>内的文字放在距离我点击的图标<i>

最近的位置

以下注册单击OK，但它不会返回h4内的值。相反，它会返回一长串详细信息，如您所见，对Codepen来说太长了：

<p class="icon heart">
  <i>icon</i>
</p>
<h4>this text</h4>


$('body').on('click', '.icon.heart i', function(e){
    var property = [];
    console.log('clicked!');
    console.log($(e).closest( ".intro-text h4" ));
});

我哪里错了？

http://codepen.io/franhaselden/pen/pboYvZ

编辑：

我更新了HTML以更能代表我的代码布局。如何访问<h4>内的内容？

https://jsfiddle.net/0jsxjqzx/3/

Answer 1

您的第一个问题是e是一个Event对象，而不是DOM元素。

您可能意味着this或e.target

然后你遇到了第二个问题（我之前没有注意到，因为你没有在问题中包含HTML，我为你解决了这个问题。）

查看the documentation of closest：

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

h4不是斜体文本的祖先！所以它不会被发现。

你需要找到段落，然后找到它的兄弟。

$(this).closest("p").next("h4");

Answer 2

您错过了最后for的右括号 console.log不是h4的父级，因此i,无法工作，您可能需要使用closest。

nextAll

jQuery(document).ready(function() {
  $('.iconheart').on('click', function(){
        var property = [];
        console.log('clicked!');
        console.log($(this).nextAll( "h4" ).html());
    });
});

Answer 3

你可以这样做：

$(document).ready(function() {
  $('body').on('click', '.icon.heart i', function() {
    var property = [];
    console.log('clicked!');
    console.log($(this).closest(':has(.intro-text)').find('h4').html());
  });
});

此处的完整示例：https://jsfiddle.net/cn8trrhn/

.on点击不返回.closest of“e”

3 个答案: