从输入数组访问自定义数据属性 jquery
Accessing custom data attributes from an array of inputs jquery
所以我无法访问我的 Web 应用程序中的自定义数据属性,并且在 google chrome 中进行调试会给我“$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">×</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
如果有人能阐明这一点,我们将不胜感激。
此时:
$myModalInputs[4].attr("data-control-number")
$myModalInputs
中的每个项目都是对元素的引用,而不是 jQuery 对象。
您可以这样做以将其转换为 jQuery 对象:
$($myModalInputs[4]).attr("data-control-number")
或者(更好的选择)从一开始就将其保留为 jQuery 对象,
var $myModalInputs = $myModal.find(".form-control");
alert($myModalInputs.eq(4).attr("data-control-number"));
所以我无法访问我的 Web 应用程序中的自定义数据属性,并且在 google chrome 中进行调试会给我“$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">×</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
如果有人能阐明这一点,我们将不胜感激。
此时:
$myModalInputs[4].attr("data-control-number")
$myModalInputs
中的每个项目都是对元素的引用,而不是 jQuery 对象。
您可以这样做以将其转换为 jQuery 对象:
$($myModalInputs[4]).attr("data-control-number")
或者(更好的选择)从一开始就将其保留为 jQuery 对象,
var $myModalInputs = $myModal.find(".form-control");
alert($myModalInputs.eq(4).attr("data-control-number"));