如何閱讀清單 <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>

這是在<ul> tabsList加載列表的javascript代碼

 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

您需要使用$（）選擇一個元素，然后找到元素ID或值的子元素。 例如：

$(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/