jQuery 循环遍历表单并仅检索可见输入的字段标签和值

Question

我有以下标记，其中有一个<div data-name="holder"></div>用于动态内容的持有人 div。<div id="main" class="agent">  <div class="page">  <div data-name="holder">    <div class="child">        <div class="area" >           <div class="box">              <div  class="section" >                 <div data-type="text" class="widget_type_text hidden" >                     <div>                         <label for="child0name">Full name</label>                     </div>                     <div>                        <div class="validationMessage">                           Enter Name                        </div>                         <input id="child0name" type="text" name="child[0][name]" required="" title="Enter full name">                     </div>                 </div>                 <div data-type="radio" class="widget_type_radio" >                     <div>                        <fieldset>                            <legend>Gender</legend>                            <span data-value="male"><input id="child0genderMale" type="radio" name="child[0][gender]" value="male"><label for="child0genderMale">Male</label></span>                            <span data-value="female"><input id="child0genderFemale" type="radio" name="child[0][gender]" value="female"><label for="child0genderFemale">Female</label></span>                        </fieldset>                     </div>                 </div>             </div>          </div>持有者可以有多个子div，其中有一个名为 child方便的类。每个子 div 可以包含多个带有名为 的类的 div area。每个具有名为 的类的 divarea可以包含一个具有名为 的类的 divsection每个具有名为 的类的 divsection可以包含多个表单输入小部件，这些小部件位于具有数据类型属性的 div 内。area具有 class或属性的 div 的可见性section可以data-type通过包含hidden类来切换。每个 div 的可见性也可以通过包含data-access值为代理或来宾的属性来限制 - 这可以通过向 div 添加代理或来宾类来实现#main。因此，如果访客用户正在访问该站点，带有 #main 的 div 将guest注入类，如果它是代理，它将有一个agent类，然后使用以下 CSS 来切换每个 div 的可见性。

Answer 1

如果类别（例如：代理、客人）是固定的并且您知道所有可能的组合是什么，您可以像这样进行选择

var $main = $('#main');

    

// filter all the class that are not in the main

var aClasses = ['agent', 'guest'].filter(function(cl) {

    return !$main.hasClass(cl)

});

// build the selector

var selector = ':not(.hidden)';

aClasses.forEach(function(cl) {

    selector += ':not([data-access="' + cl + '"])'

})

$('div.area' + selector).each(function(i, el) {

    $('div.section' + selector, el).each(function(_i, _el) {

        $('div[data-type]' + selector, _el).each(function(__i, __el) {

            // you are inside the visible 'div[data-type]' here; do your stuff

        });

    });

});

或者，像这样一下子做：

$(

    'div.area' + selector 

    + ' div.section' + selector 

    + ' div[data-type]' + selector

).each( function(i, el) {

    // your stuff

}

或者，如果您确实不想根据具有类（例如：代理、访客）的主 div 进行选择并检查完全相同的内容，您可以尝试

var $main = $('#main');

    

// get the main div's class

var sClass = (['agent', 'guest'].filter(function(cl) {

    return $main.hasClass(cl)

})[0];

// make the two selector combination

var s1 = ':not(.hidden):not([data-access])';

    s2 = '[data-access="' + sClass + '"]:not(.hidden)';

    

$('div.area' + s1 + ',div.area' + s2).each(function(i, el) {

    $('div.section' + s1 + ',div.section' + s2, el).each(function(_i, _el) {

        $('div[data-type]' + s1 + ',div[data-type]' + s2, el).each(function(__i, __el) {

            // your stuff

        });

    });

});

但在这里，要一次性写出所有内容，您必须使用 8 种不同的组合

例如：

// area-s1 sect-s1 div-s1, 

// area-s1 sect-s1 div-s2, 

// area-s1 sect-s2 div-s1,

// area-s1 sect-s2 div-s2,

// area-s2 sect-s1 div-s1,

// area-s2 sect-s1 div-s2, 

// area-s2 sect-s2 div-s1,

// area-s2 sect-s2 div-s2,

// ie:

$(

    'div.area' + s1 + ' div.section' + s1 + ' div[data-type]' + s1

    + ',div.area' + s1 + ' div.section' + s1 + ' div[data-type]' + s2

    + ',div.area' + s1 + ' div.section' + s2 + ' div[data-type]' + s1

    + ',div.area' + s1 + ' div.section' + s2 + ' div[data-type]' + s2

    + ',div.area' + s2 + ' div.section' + s1 + ' div[data-type]' + s1

    + ',div.area' + s2 + ' div.section' + s1 + ' div[data-type]' + s2

    + ',div.area' + s2 + ' div.section' + s2 + ' div[data-type]' + s1

    + ',div.area' + s2 + ' div.section' + s2 + ' div[data-type]' + s2

).each(function(i, el) {

    // your stuff

})

所以最好使用嵌套循环本身。

例子

// assume the classes are (agent, guest) and main div is having class 'agent' then

/* First approch */

$('div.area:not(.hidden):not([data-access="guest"] div.section:not(.hidden):not([data-access="guest"] div[data-type]:not(.hidden):not([data-access="guest"]').each(function(index, elem) {

    //your stuff

})

// using nested loops

$('div.area:not(.hidden):not([data-access="guest"]').each(function(i, el) {

    $('div.section:not(.hidden):not([data-access="guest"'], el).each(function(_i, _el) {

        $('div[data-type]:not(.hidden):not([data-access="guest"'], _el).each(function(__i, __el) {

            // you are inside the visible 'div[data-type]' here; do your stuff

        });

    });

});

/* Second approch */

$(

    'div.area:not(.hidden):not([data-access]) div.section:not(.hidden):not([data-access]) div[data-type]:not(.hidden):not([data-access]), '

    + 'div.area:not(.hidden):not([data-access]) div.section:not(.hidden):not([data-access]) div[data-type][data-access="agent"]:not(.hidden), '

    + ...

).each(function(i, el) {

    //your stuff

})

// using nested loops

$('div.area:not(.hidden):not([data-access]), div.area[data-access="agent"]:not(.hidden)').each(function(i, el) {

    $('div.section:not(.hidden):not([data-access]), div.section[data-access="agent"]:not(.hidden)', el).each(function(_i, _el) {

        $('div[data-type]:not(.hidden):not([data-access]), div[data-type][data-access="agent"]:not(.hidden)', _el).each(function(__i, __el) {

            // your stuff

        });

    });

});

Answer 2

jQuery 的:visible伪类将仅过滤[data-type]用户可见的元素。

因此，根据您的描述，在选择器上使用它应该足够了：

<script>

$(function () {

    function fetchFormData() {

        var result = [];

        $('[data-name=holder] [data-type]:visible').each(function (idx, elem) {

            var $elem = $(elem);

            var type = $elem.data('type');

            var label, value;

            // specific case: radio input

            if (type === 'radio') {

                label = $elem.find('legend').text();

                value = $elem.find('input[type=radio]:checked').val();

                result.push({label: label, value: value});

                // done with this item, skip to next one

                return true; // continue;

            }

            // generic case, works with most inputs

            label = $elem.find('label').text();

            value = $elem.find('input').val();

            result.push({label: label, value: value});

        });

        return result;

    }

    // add this to an event handler

    console.log(fetchFormData());

});

</script>