jquery - jQuery在简单警报中为父母选择器返回未定义

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

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

也许您正在尝试查找兄弟姐妹，因此请使用sibling('.video-space')而不是 parent()。