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

Question

我有下面的标记，其中有一个动态内容的holder <div data-name="holder"></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>
        <div class="area hidden">
          <div class="box">
             <div class="section">
                <div data-type="date" class="widget_type_date">
                    <div>
                       <label for="child0dob">Date of Birth</label>
                    </div>
                    <div>
                       <div class="validationMessage">
                           Enter Date of Birth
                       </div>
                       <input id="child0dob" type="date" name="child[0][dob]" required="" title="Enter date of Birth">
                    </div>
                </div>
             </div>
          </div>
        </div>
        <div class="area ">
          <div class="box">
             <div class="section" data-access="agent">
                <div data-type="text" class="widget_type_text">
                    <div>
                       <label for="child0school">School</label>
                    </div>
                    <div>
                       <div class="validationMessage">
                           Enter School
                       </div>
                       <input id="child0school" type="text" name="child[0][school]" required="" title="Enter school">
                    </div>
                </div>
             </div>
          </div>
        </div>
     </div>

  </div>
 </div>
</div>

持有人可以有多个子div，其中有一个名为conveniently.

• Each的类，子div可以包含多个div，一个名为area.

• Each div的类，有一个名为area的类，可以包含一个名为section

• Each div的类，其中一个名为section的类可以包含多个表单输入小部件，这些小部件位于一个具有数据类型属性的div中。

具有类area、section或data-type属性的div的可见性可以通过包含hidden类来切换。

每个div的可见性也可以通过包含一个代理或来宾值的data-access属性来限制--这是通过将代理或来宾类添加到#main div来实现的。

因此，如果一个来宾用户正在访问站点，div将被注入guest类，如果它是一个代理，它将有一个agent类，然后使用下面的CSS来切换每个div的可见性。

#main.guest [data-access="agent"] {
    display: none;
}

#main.agent [data-access="guest"] {
    display: none;
}

我需要检索所有可见性不被隐藏的表单输入的字段标签和值，无论是通过隐藏类还是数据访问属性，然后在另一个页面上重新显示它们。摘要页。

因此，在上面的示例中，如果#main div有代理类，那么只向用户显示性别和学校字段，所以函数将检索这些字段的字段标签和值，这只是因为隐藏了全名小部件和隐藏了出生日期区域。

如果#main div有客人类，那么只会显示性别字段，因为全名小部件是隐藏的，出生日期区域是隐藏的，学校部分div只有代理的数据访问权限。

因此，简单地说，我需要检查具有类区域、区段或数据类型攻击的三个div，看看它们是否是隐藏的。我还必须检查相同的div，看看它们是否包含数据访问属性，并确保可见性没有被隐藏。

因此，如果区域div具有与<div id="main" class="agent">中的类不匹配的隐藏类或数据访问属性值，就不需要更深入地遍历，因为输入字段将被隐藏。

同样，div和节类以及数据类型attr的div也是类似的情况。

如何循环遍历这些标记，仅提取已显示的表单元素的字段标签和值？

到目前为止，这就是我所拥有的：

 if ($("[data-name='holder']").children().length > 0 ) {
 
      $('.child').each(function(index, element) {

          //pseudo code
          for each div with class area 
             if div does not have class hidden or if div has data-access attribute and $( "#main" ) has class with same value then
                   if div with class section does not have class hidden or if div has data-access attribute and $( "#main" ) has class with same value then
                         for each div with data-type attribute 
                              if div does not have class hidden or if div has data-access attribute and $( "#main" ) has class with same value then
                                   save the field label and field value in array
                              end if

                         end for 
                   end if

             end if

          endfor 

      });
 }

很难将伪代码转换为jQuery。任何帮助都很感激。

*更新*

holder div可以出现在<div class="page"> div内的多个页面上，并且当用户通过表单时，前面的页面可见性被隐藏起来。因此，简单地使用jQuery的:visible伪类将无法工作，因为以前的页面上的项将被隐藏，但仍然需要在摘要页面上显示，因为它们已经呈现给用户。

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有一个类(例如: agent、来宾)并检查完全相同的类来进行选择，您可以尝试

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>