Get index-name dynamically-CodePudding

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 >';
        html  = '<h1 >"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?

CodePudding user response：

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

CodePudding user response：

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 >';
    html  = '<h1 >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>