Question

在迭代嵌套到组和节中的一组输入时，我想尝试捕获数据组和分组，但需要推送...

<script src="jquery.mobile/jquery.js"></script>

<div  id="groupA" data-group="A" class="preGroups">

    <div id="section-A1"  data-section="1">
    <input name="SRPR1"  type="text">
    <input name="SRPR2"  type="text">
    </div>

    <div id="section-A2"  data-section="2">
    <input name="SRPR1"  type="text">
    <input name="SRPR2"  type="text">
    </div>

    <div id="section-A3"  data-section="3">
    <input name="SRPR1"  type="text">
    <input name="SRPR2"  type="text">
    </div>

    <div id="section-A4" data-section="4">
    <input name="SRPR1"  type="text">
    <input name="SRPR2"  type="text">
    </div>
</div>

<div  id="groupB"  data-group="B" class="preGroups">

    <div id="section-B1" data-section="1">
    <input name="SRPR1"  type="text" value="1">
    <input name="SRPR2"  type="text"value="1">
    </div>

    <div id="section-B2" data-section="2">
    <input name="SRPR1"  type="text"value="1">
    <input name="SRPR2"  type="text">
    </div>

    <div id="section-B3" data-section="3">
    <input name="SRPR1"  type="text">
    <input name="SRPR2"  type="text">
    </div>
</div>

<script>    


    var currentGroup = "";
    var currentSection = "";

    // iterate through each group in groups
    groups = $('div[id^="group"]'); 
    $.each(groups, function(key, group) {
        currentGroup = group.getAttribute('group');
        // iterate through each section in group 
        sections = $(group).find('div[id^="section"]'); 
        $.each(sections, function(key, section) {
            currentSection = section.getAttribute('section');

            var inputs = $(section).find("input");
            inputs.each(function(){

                fnValidateDetails(currentGroup, currentSection, this.name, this.value)
            })
        });
    });

function fnValidateDetails(currentGroup, currentSection, theName, theValue ){

    console.log(currentGroup, currentSection, theName, theValue);

}

</script>

Answer 1

您可以使用jQuery以两种方式之一访问数据属性：

$('div').data('group');
$('div').attr('data-group');

$('div').data('section');
$('div').attr('data-section');

不确定这对你来说是否足够。关于“捕获”的含义，它有点模糊。

Answer 2

jQuery.attr()怎么办？

$('#element').attr('data-blabla');

Answer 3

由于您在标记中使用了data属性，因此可以使用jQuery data方法访问它们。我还将jquery对象缓存到局部变量中，这些变量在循环中用于倍数，这将有助于提高性能。

// iterate through each group in groups
    var $groups = $('div[id^="group"]'), $group, currentGroup, $sections, currentSection, $inputs; 
    $.each($groups, function(key, group) {
        $group = $(group);
        currentGroup = $group.data('group');
        // iterate through each section in group 
        $sections = $group.find('div[id^="section"]'); 
        $.each($sections, function(key, section) {
            currentSection = section.data('section');

            $inputs = $section.find("input");
            inputs.each(function(){

                fnValidateDetails(currentGroup, currentSection, this.name, this.value)
            })
        });
    })

jquery - 捕获数据属性

3 个答案: