JQuery 找父層最外層 closest

前言

工作中有遇到這個情形
來記錄一下

我有一個HTML

<div id="destination" class="destination Modules fade">
       <div class="Modules_Wrapper">
           <div class="modal-dialog xl" style="max-width: 1207px">
               <div class="modal-content" data-direction="horizontal" data-section="section1" data-dismiss="Modules">
                   <div class="modal-header">
                       <i class="icon ic-ln" data-dismiss="Modules">&#xe608;</i>
                       <h4 class="modal-title">Title</h4>
                   </div>
                   <div class="modal-body">
                       <ul class="Item">
                           <li class="Item-list">1</li>
                           <li class="Item-list">2</li>
                           <li class="Item-list">3</li>
                           <li class="Item-list">4</li>
                           <li class="Item-list">5</li>
                           <li class="Item-list">6</li>
                           <li class="Item-list">7</li>
                       </ul>
                   </div>
               </div>
           </div>
       </div>
   </div>

JS中 有一段需要點及List 來找返回其他頁面
但不知道點擊的是哪一個 ID
需要到最外層 才有ID

這時候就可以用JQ 來找到

$('Item-list').click(function (e) {

        //找到最外層的 那個 Modules 套件的calss 然後取他的ID
        let itemName = e.target.closest(".Modules").id;

        //判斷 itemName 是誰點擊 ，然後給外面的input 添加Value
        switch (itemName) {
            case "departure-location":
                $("#departurePlace").val(e.target.innerText)
                break;
            case "destination":
                $("#return-destination").val(e.target.innerText)
                break;

            default:
                break;
        }
    })

其中 e.target.closest(".Modules").id

這句話的意思就是

找到點擊的那個事件開始
往父層找 到 .Modules的那個 Class
.id然後找到他他的ID

這樣就可以了~~~

往子層找 也有一個方法叫做 find()
使用方法也是一樣

大致上是這樣
如果有錯再麻煩糾正我
感謝 : )