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');&nbsp; &nbsp;&nbsp;// filter all the class that are not in the mainvar aClasses = ['agent', 'guest'].filter(function(cl) {&nbsp; &nbsp; return !$main.hasClass(cl)});// build the selectorvar selector = ':not(.hidden)';aClasses.forEach(function(cl) {&nbsp; &nbsp; selector += ':not([data-access="' + cl + '"])'})$('div.area' + selector).each(function(i, el) {&nbsp; &nbsp; $('div.section' + selector, el).each(function(_i, _el) {&nbsp; &nbsp; &nbsp; &nbsp; $('div[data-type]' + selector, _el).each(function(__i, __el) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // you are inside the visible 'div[data-type]' here; do your stuff&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});或者，像这样一下子做：$(&nbsp; &nbsp; 'div.area' + selector&nbsp;&nbsp; &nbsp; + ' div.section' + selector&nbsp;&nbsp; &nbsp; + ' div[data-type]' + selector).each( function(i, el) {&nbsp; &nbsp; // your stuff}或者，如果您确实不想根据具有类（例如：代理、访客）的主 div 进行选择并检查完全相同的内容，您可以尝试var $main = $('#main');&nbsp; &nbsp;&nbsp;// get the main div's classvar sClass = (['agent', 'guest'].filter(function(cl) {&nbsp; &nbsp; return $main.hasClass(cl)})[0];// make the two selector combinationvar s1 = ':not(.hidden):not([data-access])';&nbsp; &nbsp; s2 = '[data-access="' + sClass + '"]:not(.hidden)';&nbsp; &nbsp;&nbsp;$('div.area' + s1 + ',div.area' + s2).each(function(i, el) {&nbsp; &nbsp; $('div.section' + s1 + ',div.section' + s2, el).each(function(_i, _el) {&nbsp; &nbsp; &nbsp; &nbsp; $('div[data-type]' + s1 + ',div[data-type]' + s2, el).each(function(__i, __el) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // your stuff&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});但在这里，要一次性写出所有内容，您必须使用 8 种不同的组合例如：// area-s1 sect-s1 div-s1,&nbsp;// area-s1 sect-s1 div-s2,&nbsp;// area-s1 sect-s2 div-s1,// area-s1 sect-s2 div-s2,// area-s2 sect-s1 div-s1,// area-s2 sect-s1 div-s2,&nbsp;// area-s2 sect-s2 div-s1,// area-s2 sect-s2 div-s2,// ie:$(&nbsp; &nbsp; 'div.area' + s1 + ' div.section' + s1 + ' div[data-type]' + s1&nbsp; &nbsp; + ',div.area' + s1 + ' div.section' + s1 + ' div[data-type]' + s2&nbsp; &nbsp; + ',div.area' + s1 + ' div.section' + s2 + ' div[data-type]' + s1&nbsp; &nbsp; + ',div.area' + s1 + ' div.section' + s2 + ' div[data-type]' + s2&nbsp; &nbsp; + ',div.area' + s2 + ' div.section' + s1 + ' div[data-type]' + s1&nbsp; &nbsp; + ',div.area' + s2 + ' div.section' + s1 + ' div[data-type]' + s2&nbsp; &nbsp; + ',div.area' + s2 + ' div.section' + s2 + ' div[data-type]' + s1&nbsp; &nbsp; + ',div.area' + s2 + ' div.section' + s2 + ' div[data-type]' + s2).each(function(i, el) {&nbsp; &nbsp; // 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) {&nbsp; &nbsp; //your stuff})// using nested loops$('div.area:not(.hidden):not([data-access="guest"]').each(function(i, el) {&nbsp; &nbsp; $('div.section:not(.hidden):not([data-access="guest"'], el).each(function(_i, _el) {&nbsp; &nbsp; &nbsp; &nbsp; $('div[data-type]:not(.hidden):not([data-access="guest"'], _el).each(function(__i, __el) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // you are inside the visible 'div[data-type]' here; do your stuff&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});/* Second approch */$(&nbsp; &nbsp; 'div.area:not(.hidden):not([data-access]) div.section:not(.hidden):not([data-access]) div[data-type]:not(.hidden):not([data-access]), '&nbsp; &nbsp; + 'div.area:not(.hidden):not([data-access]) div.section:not(.hidden):not([data-access]) div[data-type][data-access="agent"]:not(.hidden), '&nbsp; &nbsp; + ...).each(function(i, el) {&nbsp; &nbsp; //your stuff})// using nested loops$('div.area:not(.hidden):not([data-access]), div.area[data-access="agent"]:not(.hidden)').each(function(i, el) {&nbsp; &nbsp; $('div.section:not(.hidden):not([data-access]), div.section[data-access="agent"]:not(.hidden)', el).each(function(_i, _el) {&nbsp; &nbsp; &nbsp; &nbsp; $('div[data-type]:not(.hidden):not([data-access]), div[data-type][data-access="agent"]:not(.hidden)', _el).each(function(__i, __el) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // your stuff&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});

Answer 2

jQuery 的:visible伪类将仅过滤[data-type]用户可见的元素。因此，根据您的描述，在选择器上使用它应该足够了：<script>$(function () {&nbsp; &nbsp; function fetchFormData() {&nbsp; &nbsp; &nbsp; &nbsp; var result = [];&nbsp; &nbsp; &nbsp; &nbsp; $('[data-name=holder] [data-type]:visible').each(function (idx, elem) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $elem = $(elem);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var type = $elem.data('type');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var label, value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // specific case: radio input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (type === 'radio') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label = $elem.find('legend').text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value = $elem.find('input[type=radio]:checked').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.push({label: label, value: value});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // done with this item, skip to next one&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true; // continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // generic case, works with most inputs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label = $elem.find('label').text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value = $elem.find('input').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.push({label: label, value: value});&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; return result;&nbsp; &nbsp; }&nbsp; &nbsp; // add this to an event handler&nbsp; &nbsp; console.log(fetchFormData());});</script>