选择最近的父jquery的子

Question

我在视图中有以下卡片标题:

<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,但它只是打印undefined:

$('.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>