jquery - 捕获数据属性

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

;