如何使用 Jquery 从列表组行中获取特定项目值

Question

I have a list group with many rows each row has more than two data each item has an id , I wish if i click a such row i can get a custom value, but the way I am using gives me all row's values. If try to change this to items id it does effect only on first row (position 0 of listGrou). please help me, ,

Html and php code :

<div  id="listid">  
    <ul class="list-group p-5 col-sm-8 offset-2" id="content">
<?php 
    while ($registered = mysql_fetch_array($query_student)) {
?>
        <li class="list-group-item  list-group-item-action Divlistid" >
            <a href="#">
                <span id="name">
                    <h4><b>
                    <?php echo $registered['firstname']; ?>
                    </b></h4>
                </span>
                <span id="gender">
                <?php echo $registered['gender']; ?>
                </span>
        </li>

<?php 
    } 
?>
    </ul>  
</div> 

Jquery code which is not getting a custom item but all row's items:

$(".list-group-item").click(function(){
    var id = $(this).attr('id')
    var text = $(this).text();
    console.log(id)
    console.log(text)
})

Answer 1

Target your li's by index:

$(".list-group-item").('click',function(){

     var liIndex = $(this).index();
     if( liIndex === 0 ){ // i'm the first li from .list-group }

     // target last - logical
     if( liIndex === $(this).parent().children('.list-group-item').length -1 ){ // i'm the last li from .list-group }

    // target last - hardcoded
     if( liIndex === $('.list-group .list-group-item').length -1 ){ // i'm the last li from .list-group }

})

Answer 2

You can not have multiple elements in your DOM with the same ids. You can try to concatenate these ids with the loop counter for example and target elements with jquery using 'class' attribute.