javascript - jQuery 根据其中的点击元素获取 <li> 的 ID

Question

任何人都知道如何使用 jQuery 根据其中单击的元素获取

的 ID？
这是我的 html 标签:

<div id="grade_contamina">
    <ul id="ul_element">
        <!---My first li--->
        <li id="first_id">
            <p>
                Apple
            </p>
            <!---Button for apple---->
            <span class="fruits" id="btn_apple">
                <a class="btn_send_once">Send to Students</a>
                <a class="btn_delete_once" >Delete</a>
                <a class="btn_download_once">Download</a>
            </span>
        </li>
        <!---My second li--->
        <li id="second_id">
            <p>
                Grapes
            </p>
            <!---Button for grapes---->
            <span class="fruits" id="btn_grapes">
                <a class="btn_send_once">Send to Students</a>
                <a class="btn_delete_once" >Delete</a>
                <a class="btn_download_once">Download</a>
            </span>
        </li>
    </ul>
</div>

每个 LI 元素有 3 个按钮，删除、发送和下载。 比方说从“apple LI 元素”，我点击了删除。我需要根据其 id 删除此 LI 元素，或者我想根据其 id 发送此 base 。现在如何获取 LI 的 ID 或者获取 LI 元素 ID 的最佳方法是什么？

除了获取 id 之外，我还想在单击删除按钮时触发 JQUERY 效果。

I want this happen if the button delete is clicked.
**Remove the LI element which is  clicked
**Apped a new LI element at the last LI element of ul using "FadeIn Effect".

这是我的伪代码

if button is clicked{
   var the_id = get the id of LI where the button is clicked
   now which one of button is clicked?
   if button send is  clicked{
     some code here, i will need here the id to send...
   }else if button download is clicked{
     some code here, i will need here the id too..
   }else if button delete is clicked{
     remove the LI element (With fadeOut effect if possible)
     append a new LI element at the end of LI whith fadeIn effect
   }
   //End of Statement
}

谁能帮帮我？我对 jQuery 知之甚少，因此将不胜感激。谢谢你!!!

Answer 1

要在a 点击时获取li 的id，您需要使用closest。 这将获得被点击元素最近的 li 祖先。

$('#grade_contamina').on('click', 'a', function() {
    alert($(this).closest('li').attr('id'));
    return false;
});