Question

我正在尝试访问DOM树中单击项目的父项，并且由于某种原因它没有任何内容。

这是我的jQuery：

$('.video-icon').click(function() {
    alert($(this).closest('.video-space').html())
});

我的HTML：

<div class="video">
    <div class="video-space">
        <img src="img/video-1.jpg" alt="" class="video-img">
    </div>
    <div class="video-info">
        <div class="video-icon">
            <img src="img/video.svg" alt="" class="video-icon-img">
        </div>
        <h3 class="video-text">Watch video</h3>
        <h3 class="video-title" data-video="http://www.youtube.com/watch?v=xxxxxxxxx">Toy Story Trailer</h3>
    </div>
</div>

任何关于让它运作的建议都很棒！

Answer 1

.video-space 不是.video-icon的祖先。 closest查找与选择器匹配的第一个祖先元素，这就是它无法工作的原因。

你需要这样的东西：

$('.video-icon').click(function() {
    alert($(this).closest('.video').find('.video-space').html())
});

示例： http://jsfiddle.net/6zAN7/14/

Answer 2

我没有看到HTML代码中的.video-space内有任何.video-icon。因此，当单击.video-icon时，它会尝试在其父项中找到.video-space，但没有，所以它不会输出任何内容。

也许您正在尝试找到兄弟姐妹，所以请使用sibling('.video-space')而不是父（）。

jQuery在简单警报中为父选择器返回undefined

2 个答案: