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元素的兄弟。

我试图抓住复选框，同时循环遍历跨度数组：

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

但我收到错误

TypeError：spanArray [s] .siblings不是函数

如何从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

由于spanArray[s]会返回DOM元素，但他们没有siblings()方法。

您应该使用$.fn.eq(index)

将匹配元素集减少到指定索引处的元素

代码的

spanArray.eq(s).next('span').find('input:checkbox')

使用$.fn.map()和$.fn.get()

可以改进您的代码

var jsonArray = $("#sortable span[data-attrib='attrib']").map(function() {
    var _this = $(this),
        _checked = _this.next('span').find('input:checkbox');
    return {
        "entityid": _this.data("entityid"),
        "entitytype": _this.data("entitytype"),
        "isChecked": _checked.is(':checked')
    }
}).get();

Answer 2

您可以使用像

这样的东西

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();

Answer 3

试试这个：

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

从span元素数组中获取兄弟复选框输入

3 个答案: