選擇最接近的父級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，但它只是打印未定義：

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