jQuery获取ID <li> 基于其中的单击元素

Question

任何人都知道我如何获得

基于它里面使用jQuery的clicked元素？
这是我的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个按钮，即删除，发送和下载。 可以说，从“苹果LI元素”中，我单击了删除。 我需要根据其ID删除此LI元素，或者我要根据其ID发送此LI元素。 现在如何获取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;
});

Answer 2

<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

Answer 3

您可以像在此提琴中一样使用jQuery.attr（propertyname）： https ://jsfiddle.net/d907e6gm/

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

Answer 4

我不会给出所有代码。 我将向您展示如何获取列表项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

Answer 5

尝试过滤.parents()的点击a ，返回id的a父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>