使用 JQuery 获取所有数据绑定值答案

【问题标题】：Getting All Data-Bind Values Using JQuery使用 JQuery 获取所有数据绑定值
【发布时间】：2012-06-18 15:35:18
【问题描述】：

    function getDbValue()
{
    alert($('[data-bind]').length);
    alert($('[data-bind][0].data-bind'));
    alert($('[data-bind][0].value'));
    jQuery.each($('[data-bind]'), function(databind,key)
    {
        alert(key);
        alert(databind);
        alert(databind[key].data-bind);
    })

}

以上是我的函数，我想读取所有具有数据绑定属性的输入，例如

<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer" class="InputText"/>

^ 运行我的函数时，我希望它返回“AOfficer”，因为这是数据绑定值。

举个例子

<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer1" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer2" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer3" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer4" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer5" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer6" class="InputText"/>

在 for each 循环中，我希望能够使用数据绑定的值。例如 values[0] = 'AOfficer1'

对不起，如果我的解释有点混乱，我的想法很完美，但试图把它写下来要困难得多。

【问题讨论】：

你试过jquery的.data()方法吗？ $('input').data('bind');? api.jquery.com/jQuery.data
是的，但是当使用 for each 语句并这样做时，我得到 Uncaught TypeError: Object 0 has no method 'data'
这可能是因为在您的for each 循环中您使用的是本机DOM 元素而不是jQuery 对象。只有包裹在 jQuery 对象中的元素才会有 .data() 方法。

标签： javascript jquery forms object properties

【解决方案1】：

jQuery 对“data-something”属性的解释与其他属性不同。因此，您应该选择所有元素并查找它们的数据绑定，如下所示：

$(document).ready(function(){
    $('input.InputText').each(function(){
        var input = $(this);
        if ($(input).data().bind) {
            alert($(input).data().bind);
        }
    });
});

然后你可以进行字符串操作来解析你的值，我建议使用 JSON 并像一个对象一样加载它。这是一个有效的小提琴：http://jsfiddle.net/3NERK/6/

【讨论】：

【解决方案2】：

您可以通过 jQuery 属性选择器 - $("[data-bind]") 搜索具有 data-bind 属性的任何元素，然后使用 .each() 对其进行迭代并从中构造 dataBinds 数组，剥离 @987654326 @ out of each value.

这样就可以了：

dataBinds = [];
$("[data-bind]").each(function(){
     dataBinds.push($(this).attr("data-bind").substring(7));
});

我已经建立了一个例子：http://jsfiddle.net/dvirazulay/YPnwQ/

【讨论】：

【解决方案3】：

$( "[data-bind]" ).each( function() {
    var elem = $( this );
    alert( elem.data( "bind" ) );
});

http://jsfiddle.net/NhNhK/

【讨论】：

【解决方案4】：

获取所有具有data-bind属性的元素：$('[data-bind]')

迭代这些元素并操作 data-bind 属性：

$('[data-bind]').each(function(element,index){
  var data_bind = $(element).data('bind');
  alert(data_bind);
})

【讨论】：

【解决方案5】：

您可以使用.data() 方法和.each() 来完成此操作。

DEMO

$('input').each(function() {
    var $this = $(this);

    alert($this.data('bind').replace("value: ", ""));            
});

【讨论】：