CODEWITHSUNDEEP
jqueryattributesselector
mustapha george
mustapha george

Reputation: 621

jquery - capture data attributes

While iterating through a a set of input nested into groups and sections, I want to try to capture the data-group and section-group, but need a push...

<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>

Upvotes: 1

Views: 4554

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Since you have used data attributes in your markup you can access them using jQuery data method. Also I have cached the jquery object into local variables which are used at multiples in the loop which will help improve the performance.

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

;

Upvotes: 0

maxedison
maxedison

Reputation: 17573

You can access data attributes in one of two ways using jQuery:

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

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

Not sure if that's enough for you. It's a bit vague as to what you mean by "capture".

Upvotes: 2

ldiqual
ldiqual

Reputation: 15375

What about jQuery.attr() ?

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

Upvotes: 1

Related Questions