jQuery get the ID of <li> based on clicked element inside of it

Question

Anyone know how can I get the id of

based on the clicked element inside of it using jQuery?
This is my html tag:

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

Every LI element there is 3 button, the delete, send, and download. let say from the 'apple LI element', i clicked the delete. i need to delete this LI element base on its id, or i want to send this base on its id. now how can i get the id of LI or what is the best way to get the ID of LI element?

aside from getting the id, i want to fire a JQUERY effect when the button delete is clicked.

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

this is my pseudo code

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
}

Anyone can help me? I only have small knowledge in jQuery, so any help will be appreciated. Thank You!!!

Upvotes: 2

Views: 5006

Answer 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);
        }
    })
})

The above code will get you the button's class along with its li's id

Answer 2

Try filtering .parents() of clicked a , returning 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>

Answer 3

I am not going to give all the code. I will just show you, how to get list item id and which button you have clicked.

 $(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 4

You could use jQuerys .attr(propertyname) like I did in this fiddle: https://jsfiddle.net/d907e6gm/

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

Answer 5

To get the id of li on the a click, you need to use closest. This will get the closest li ancestor of the clicked element.

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