javascript - 选择最近父级jquery的子级

Question

我的 View 中有以下卡头:

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

当我点击添加帖子按钮时，我试图获取类别名称

我尝试了以下 jquery，但它只是打印了未定义:

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

Answer 1

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

此外，要按类选择，您需要在类名前添加 '.'，因此 '.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>