Get index-name dynamically

user_17073133 0
Viewed 35

So, I have an UL which is empty. By clicking on a button, list-items (li) will be added to the ul. All these items do have a header (h1). The header of each item, has to get it's index from the list. So the second li needs to have a header with the number 2, and the third with the number 3.

I've searched the internet for a while for proper solutions, but wasn't able to find one. Now I have created a small piece of code which, in my opinion, should work. But it doesn't. Below is the JavaScript (jQuery) code which adds the items to the list, but also sets it's header.

    /*Give all list items a name*/
    function AddName() {
        var list = $("#jrn_form_input_list");

        for (var i = 0; i < 5; i++) {
            var index = $("li").index(list[i]);
            var header = "Journey leg: " + index;
            $(list[i]).find("h1").text(header);
        }
    };

    /*Add journy leg*/
    $("#jrn_add_leg_btn").click(function() {
        var html = '';
        html += '<li>';
        html += '<div class="jrn_field">';
        html += '<h1 class="jrn_field_header">"TEST_LEG_NAME"</h1>';
        html += '<label for="jrn_location"><b>Traveling to</b></label>';
        html += '<input type="text" name="jrn_location">';
        html += '</div>';
        html += '</li>';

        $("#jrn_form_input_list").append(html);
        AddName();    
    });

So the function AddName() doesn't work. Is there anyone who knows how to do this properly in JavaScript/jQuery?

html-lists html jquery javascript
2 Answers

You can use .length to get count of the li tags inside your main list and then append it to the header text.

Demo Code :

$("#jrn_add_leg_btn").click(function() {
  let length = $("#jrn_form_input_list").children().length; //get count of li
  var html = '';
  html += '<li>';
  html += '<div class="jrn_field">';
  html += "<h1 class='jrn_field_header'>Journey leg " + (length + 1) + "</h1>";
  html += '<label for="jrn_location"><b>Traveling to</b></label>';
  html += '<input type="text" name="jrn_location">';
  html += '</div>';
  html += '</li>';
  $("#jrn_form_input_list").append(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="jrn_form_input_list"></ul>
<button id="jrn_add_leg_btn">Click Me !! </button>

user_106064000

In this example all 5 list items are added at once.

 $( "#jrn_add_leg_btn" ).click(function()
    { 
    for (var i = 0; i < 5; i++) 
    {
    var j = i + 1;
    var html = '';
    html += '<li>';
    html += '<div class="jrn_field">';
    html += '<h1 class="jrn_field_header">Journey leg:'+ j +'</h1>';
    html += '<label for="jrn_location"><b>Traveling to</b></label>';
    html += '<input type="text" name="jrn_location">';
    html += '</div>';
    html += '</li>';
    $("#jrn_form_input_list").append(html);
    }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id = "jrn_add_leg_btn" >click</button>
<ul id='jrn_form_input_list'></ul>

user_54589870
Related