Jump to content

How would I give each appended li elements a unique I'd?


Go to solution Solved by Abel1416,

Recommended Posts

Good day!! My issue is this...

I sent an ajax request to get some details at the backend. After splitting the response i have 2 different arrays set to a variable. 

I.e **allQst** [1,2,3,4,5,6] and **attempted** [1,2,3,4].

I now looped allQst with foreach and created an li element to list each at the frontend which works fine. The issue now is trying to add a different id for each li that would be listed. 

I tried to add .attr() to the li as in,

    <li>bla bla...</li>.html(item).attr("id","listing"+item);

This gives it the same id. I.e listing1 for all li

I also tried to make it

    <li>bla bla...</li>.html(item).attr('id', function(i) { return 'listing'+(i+1); });

Doesn't work.

This is my code in full...   

$(document).ready(function() {
    $("#next,#prev").one('click', function() {
            url: 'done.php',
            method: 'post',
            dataType: "JSON",
            success: function(response) {
                var rsp = response.r2;
                var rspB = response.r1;
                var allQst = rsp.split(",");
                var attempted = rspB.split(",");

                function func(item, index) {
                    var ul = $("#list");
                    var li = $('<li  class="pagination-link"></li>').html(item).attr('id', function(i) {
                        return 'listing' + (i + 1);

                function func2(item, index) {
                    $("#" + item).addClass("is-current");
            } //succes func end
        }); //ajax end
    }); //click func end
            }); //doc end

What I want to achieve lastly is to get the id and add a class to each of them.

I would be glad if you can assist me!! Thanks in advance.

Link to comment
Share on other sites

If you have

allQst = [1,2,3,4,5,6]

attempted = [5,6]

then the indexes of 5 and 6 are different in those two arrays so I used the items as the id values

                function func(item, index) {
                    var li = $('<li  class="pagination-link"></li>').html(item).attr('id', item);

                function func2(item, index) {


Link to comment
Share on other sites

Using attempted = [5,6] with the code I posted, I get...

    <ul id="list">
        <li class="pagination-link" id="1">1</li>
        <li class="pagination-link" id="2">2</li>
        <li class="pagination-link" id="3">3</li>
        <li class="pagination-link" id="4">4</li>
        <li class="pagination-link is-current" id="5">5</li>
        <li class="pagination-link is-current" id="6">6</li>


  • Like 1
Link to comment
Share on other sites


I commented out my code and replaced it with urs still the same. It's been listed but the class is not added. When I tried to get the value of the id of the li's in function func2{....}, it shows undefined whereas it's being displayed at function func{}.

Like the id of the listed items is not accessible when adding the class. 


Link to comment
Share on other sites


var li = $('<li  class="pagination-link"></li>').html(item).attr('id', function(i) {
	return 'listing' + (i + 1);

won't work because the li is only one element (at a time) so they all have i=0.

Barand's code has a typo and should be

var li = $('<li  class="pagination-link"></li>').html(item).attr('id', index);

which correctly does what the first code was attempting to do.

Link to comment
Share on other sites

  • Solution

Thanks to you all!! I would have saved myself from posting this question if I took a second to check my responses from the backend.


I did

$attempted = implode(" ,",$arr);

Which made the response had a space [1 ,2 ,3 ,4]; 


thanks once again




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.