Как прочитать список <li>в JavaScript

Question

Добрый день

У меня есть форма в JavaScript, у меня также есть скрытые поля в <li>, которые я хочу включить в них, когда читаю список.

Я хочу прочитатьTest1 и Test2 и его скрытое поле и сохраните его в binList[]

Вот форма

<ul class="nav nav-tabs" id="tabsList">
<li id="Test1TabId"> <a data-toggle="tab" href="#tblTest1">Test1 </a>
    <input type="hidden" id="Test1" name="Name">
    <input type="hidden" id="Test 1 desc" name="Description">
    <input type="hidden" id="1" name="BinType">
    <input type="hidden" id="Client Bin" name="BinTypeName"></li>
<li id="Test2TabId"> <a data-toggle="tab" href="#tblTest2">Test2 </a>
    <input type="hidden" id="Test2" name="Name">
    <input type="hidden" id="Test 2 desc" name="Description">
    <input type="hidden" id="1" name="BinType">
    <input type="hidden" id="Client Bin" name="BinTypeName"></li>

Вот код JavaScript длязагрузить список в <ul> tabsList

 var binName = $('#Name').val();
 var binDescription = $('#Description').val();
 var binTypeId = $('#SelectBinType').val();
 var binTypeName = $("#SelectBinType option:selected").text();
 var binList = [];

 var binList = [];
 const listItem = Array.from(document.querySelectorAll('#tabsList>li'));
        for (let i = 0; i < listItem.length; i++) {
            Name: binName;
            Description: binDescription;
            BinTypeId: binTypeId;
            BinTypeName: binTypeName;

            binList.push(listItem[i]);
        }

  var finalObject = ({
                Bins: binList

            });

Answer 1

Вам нужно использовать $ (), чтобы выбрать элемент, а затем найти дочерний элемент для идентификатора или значений элемента.Например:

$(document).ready(function() {
$("#show").click(function() {
    const listItem = $('#tabsList>li');
    var binList = [];

    listItem.each(function() {
        var el = $(this);
        var lists = {};

        lists.name = el.find("input[name=Name]").attr("id");
        lists.description = el.find("input[name=Description]").attr("id");
        lists.bintype = el.find("input[name=BinType]").attr("id");
        lists.bintypename = el.find("input[name=BinTypeName]").attr("id");

        binList.push(lists);
    });

    var finalObject = ({
        Bins: binList
    });
    $("#result").val(JSON.stringify(binList));
});

$("#tabsList li a").click(function() {
    const listItem = $(this).parent("#tabsList li");
    var binList = [];

    var el = listItem;
    var lists = {};

    lists.name = el.find("input[name=Name]").attr("id");
    lists.description = el.find("input[name=Description]").attr("id");
    lists.bintype = el.find("input[name=BinType]").attr("id");
    lists.bintypename = el.find("input[name=BinTypeName]").attr("id");

    binList.push(lists);

    var finalObject = ({
        Bins: binList
    });
    $("#result").val(JSON.stringify(binList));
});
});

https://jsfiddle.net/xpvt214o/195593/