javascript - 从跨度元素数组中获取兄弟复选框输入

Question

我正在尝试使用 JavaScript 从 span 元素数组中抓取同级复选框项。

我创建了一个函数来获取我需要的所有 span 元素。

然后我将内容存储到一个 JSON 对象中并将其隐藏在一个隐藏字段中。 (这与问题无关)

代码如下:

var spanArray = $("#sortable span[data-attrib='attrib']");
jsonArray = [];
for (var s = 0; s < spanArray.length; s++) {
    jsonArray.push({
        "entityid": spanArray[s].getAttribute("data-entityid"),
        "entitytype": spanArray[s].getAttribute("data-entitytype")
    });
}
$("#<%= hdnData.ClientID %>").val(JSON.stringify(jsonArray));
console.log($("#<%= hdnData.ClientID %>").val());

这一切都运行良好。但是我还需要向我的 JSON 对象添加更多属性。我需要确定一个复选框的选中状态，该复选框是数组中每个 span 元素的同级元素。

我试过像这样循环遍历 span 数组时捕获复选框:

var chkbox = spanArray[s].siblings('input');

但是我遇到了一个错误

TypeError: spanArray[s].siblings is not a function

如何从 span 数组中获取复选框及其选中状态？

请求的 HTML:

<ul id="sortable" class="sortable ui-sortable">
    <li id="ctl00_MainContentPlaceHolder_ctl00_lstItems_ctrl1_liObject" class="ui-state-default">
        <span class="ui-icon ui-icon-arrow-4"></span>
        <span data-attrib="attrib" data-entityid="3" data-entitytype="RxdClaimDocument">PBA LOA</span>
        <span>
            <input id="chkRequired" type="checkbox">
        </span>
    </li>
    <li id="ctl00_MainContentPlaceHolder_ctl00_lstItems_ctrl2_liObject" class="ui-state-default">
        <span class="ui-icon ui-icon-arrow-4"></span>
        <span data-attrib="attrib" data-entityid="4" data-entitytype="RxdClaimantDocument">FOS Sig Page (PBA)</span>
        <span>
            <input id="chkRequired" type="checkbox">
        </span>
    </li>
    <li style="" id="ctl00_MainContentPlaceHolder_ctl00_lstItems_ctrl0_liObject" class="ui-state-default">
        <span class="ui-icon ui-icon-arrow-4"></span>
        <span data-attrib="attrib" data-entityid="2" data-entitytype="DocumentPurposeName">Pba Letter Of Claim</span>
        <span>
            <input id="chkRequired" type="checkbox">
        </span>
    </li>

    <li id="ctl00_MainContentPlaceHolder_ctl00_lstItems_ctrl3_liObject" class="ui-state-default">
        <span class="ui-icon ui-icon-arrow-4"></span>
        <span data-attrib="attrib" data-entityid="5" data-entitytype="RxdClaimantDocument">Photo Id</span>
        <span>
            <input id="chkRequired" type="checkbox">
        </span>
    </li>

    <li id="ctl00_MainContentPlaceHolder_ctl00_lstItems_ctrl4_liObject" class="ui-state-default">
        <span class="ui-icon ui-icon-arrow-4"></span>
        <span data-attrib="attrib" data-entityid="6" data-entitytype="RxdClaimantDocument">Proof of Address</span>
        <span>
            <input id="chkRequired" type="checkbox">
        </span>
    </li>
</ul>

Answer 1

你可以使用类似的东西

var spanArray = $("#sortable span[data-attrib='attrib']");

var jsonArray = spanArray.map(function () {
    var $this = $(this),
        $checked = $this.siblings('input:checkbox');
    return {
        "entityid": $this.data("entityid"),
            "entitytype": $this.data("entitytype"),
        checked: $checked.is(':checked')
    }
}).get();

• .map()
• siblings()