jQuery 根据其中的单击元素获取 <li> 的 ID答案

【问题标题】：jQuery get the ID of <li> based on clicked element inside of itjQuery 根据其中的单击元素获取 <li> 的 ID
【发布时间】：2015-08-01 04:48:38
【问题描述】：

任何人都知道我怎样才能得到 p>

使用 jQuery 基于其中的单击元素？
这是我的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 element”说起，我点击了删除。我需要根据它的 id 删除这个 LI 元素，或者我想根据它的 id 发送这个基础。现在如何获取 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 的了解很少，因此将不胜感激。谢谢！！！

【问题讨论】：

你好，li base 是什么意思？
this.id 应该可以解决问题。

标签： javascript php jquery html css

【解决方案1】：

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

$(document).ready(function(){
    $('#grade_contamina').on('click', 'a', function() {
        var btn_name = $(this).attr('class')
        var id = $(this).closest('li').attr('id');
        if(btn_name == 'btn_send_once'){
            alert(btn_name+" within "+id);
            //your code
        }else if(btn_name == 'btn_delete_once'){
            alert(btn_name+" within "+id);
        }else{
            alert(btn_name+" within "+id);
        }
    })
})

以上代码将为您提供button 的class 及其li 的id

【讨论】：

【解决方案2】：

尝试过滤.parents() of clicked a ，返回id of a parent li

$("#grade_contamina a").on("click", function() {
  console.log($(this).parents("li")[0].id)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

【讨论】：

【解决方案3】：

我不会给出所有代码。我将向您展示如何获取列表项 id 以及您单击了哪个按钮。

 $(document).ready(function(){
    $("#ul_element a").on("click",function(){
    idli = $(this).closest("li").attr("id"); // your list item id.
    val = $(this).text(); // your link text       
   });
 });

DEMO

【讨论】：

【解决方案4】：

你可以像我在这个小提琴中那样使用 jQuerys .attr(propertyname)： https://jsfiddle.net/d907e6gm/

$('ul > li').click(function(){
alert($(this).attr('id'));
});

【讨论】：

如果您想将事件处理程序附加到您的锚元素，您也可以使用 parent() 或者如果结构始终相同，则在您的情况下使用两个父母。 alert($(this).parent().parent().attr('id'));

【解决方案5】：

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

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

【讨论】：