选择最接近的 child parent jquery

Question

我有以下卡片 header 在我看来：

<div class="card-header">
    <div class="media">
        <div class="media-body media-middle">
            <h4 class="card-title">{{ category.name }}</h4>
            <p class="card-subtitle">{{ category.description }}</p>
        </div>
        <div class="media-right media-middle">
            <a href="#" data-toggle="modal" data-target="#addForumPostModal" class="btn btn-white btn-sm add-post-button"><i class="material-icons">add</i></a>
        </div>
    </div>
</div>

我试图在单击 add-post-button

时获取类别名称

我尝试了以下 jquery 但它只是打印了 undefined:

$('.add-post-button').on('click', function (){
    console.log($(this).closest('media').children('card-title').html())
});

Answer 1

使用 .find() 而不是 .children() - 后者只查看直系子代，不查看孙代等，而 .find() 查找任何级别的后代。

此外，要通过 class select，您需要在 class 名称之前添加 '.'，因此 '.media' 和 '.card-title' 而不是'media' 和 'card-title'.

$('.add-post-button').on('click', function (){
    console.log($(this).closest('.media').find('.card-title').html())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="card-header">
    <div class="media">
        <div class="media-body media-middle">
            <h4 class="card-title">{{ category.name }}</h4>
            <p class="card-subtitle">{{ category.description }}</p>
        </div>
        <div class="media-right media-middle">
            <a href="#" data-toggle="modal" data-target="#addForumPostModal" class="btn btn-white btn-sm add-post-button"><i class="material-icons">add</i></a>
        </div>
    </div>
</div>

选择最接近的 child parent jquery

Selecting child of closest parent jquery

javascript

jquery

parent

closest