从输入数组jquery访问自定义数据属性

时间:2016-10-07 19:05:27

标签: jquery web custom-data-attribute

所以我在访问我的网络应用程序中的自定义数据属性时遇到问题,并且在谷歌浏览器中调试给了我" $ myModalInputs [4] .attr不是一个函数"而我只是想知道我哪里出错了。

(你可以进入循环,它还没有工作,但它也不是我头痛的根源)

function displayData(myInputs){
var $myModal = $(".modal-body");
var $myModalInputs = $($myModal.find(".form-control").toArray());

// error is at this line:
alert($myModalInputs[4].attr("data-control-number"));
for (var i = 0; i < myInputs.length; i++)
{
    var $currentValue = myInputs[i].value;
    var $currentControl = $('.modal-body[data-control-number="' + i + '"]');
    alert($currentControl.data("control-number"));
}}

范围内的html部分

 <div id="myModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>New Line Item</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-6">
                                <label>Cost Center:</label>
                                <br />
                                <asp:DropDownList ID="DropDownList1" CssClass="form-control" runat="server" data-control-number="1"></asp:DropDownList>
                            </div>
                            <div class="col-xs-6">
                                <label>Account Number</label>
                                <br />
                                <asp:DropDownList ID="DropDownList2" CssClass="form-control" runat="server" data-control-number="2"></asp:DropDownList>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <label>JON:</label>
                <asp:TextBox ID="TextBox5" CssClass="form-control" runat="server" data-control-number="3"></asp:TextBox>
                            </div>
                            <div class="col-xs-6">
                                <label>Item Name:</label>
                <asp:TextBox ID="TextBox6" CssClass="form-control" runat="server" data-control-number="4"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <label>Item Description:</label>
                <asp:TextBox ID="TextBox7" CssClass="form-control" runat="server" data-control-number="5"></asp:TextBox>
                            </div>
                            <div class="col-xs-6">
                                <label>Quantity:</label>
                <asp:TextBox ID="TextBox8" CssClass="form-control" runat="server" data-control-number="6"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <label>Unit Price:</label>
                <asp:TextBox ID="TextBox9" CssClass="form-control" runat="server" data-control-number="7"></asp:TextBox>
                            </div>
                            <div class="col-xs-6">
                                <label>Tax:</label>
                <asp:TextBox ID="TextBox10" CssClass="form-control" runat="server" data-control-number="8"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                <label>Receipt/Attachment:</label>
                <asp:FileUpload ID="FileUpload1" CssClass="form-control" runat="server" data-control-number="9"/>
                            </div>
                        </div>
                    </div>
                </div> <!--End Modal Body -->
                <div class="modal-footer">
                    <div id="moda-buttons">
                        <button></button>
                        <button></button>
                    </div>
                <div id="modal-pagination">
                    <ul class="pagination"></ul>
                </div>
                </div>
            </div> <!-- End Modal Content --> 
        </div>
    </div>
有趣的是我可以在数组中得到该索引的输入值,如果我使用.id,我甚至可以得到id。我只是无法获得自定义数据属性,我想我不是100%需要,但它会使应用程序减少对html的依赖。

另外,如果我按建议使用.data(),我会收到同样的错误HERE

注意:由HTML显示我的输入控件是asp / .net

如果有人可以对此有所了解,那将会非常明显。

1 个答案:

答案 0 :(得分:0)

此时:

declare 
  column_already_indexed exception;
  pragma exception_init( column_already_indexed, -1408 );
begin
  call_procedure;
exception
  when column_already_indexed
  then
    null;
    -- Do something with the exception
end;

$myModalInputs[4].attr("data-control-number") 中的每个项都是对元素的引用,而不是jQuery对象。

您可以这样做将其转换为jQuery对象:

$myModalInputs

或者(一个更好的选择)从头开始将它保留为jQuery对象,

$($myModalInputs[4]).attr("data-control-number")