Javascript jQuery查找匹配多个条件的元素

如果我有以下标记，我如何检查每个子级中的每个div是否没有隐藏类，以及它是否有一个数据访问属性，该属性的值是否等于id=main的div中的类的值

 <div id="main" class="agent">

   <div class="child">
     <div class="area hidden" >
        <div class="section">
           <div data-type="text" >
                 <input type="text" name="firstname">
             
           </div>
        </div>
      </div>
   </div>
   <div class="child">
     <div class="area" data-access="agent">
        <div class="section">
           <div data-type="text" >
                   <input type="text" name="lastname">
             
           </div>
        </div>
      </div>
   </div>
   <div class="child">
     <div class="area">
        <div class="section">
           <div data-type="text" >
                 <input type="text" name="refnumber">
           </div>
        </div>
      </div>
   </div>
   
   

---

在检查div是否不包含隐藏类的同时，我想检查这些div中的每个div是否也包含数据访问属性，如果包含，则检查该值是否等于

中的类的值。您可以首先检查是否有任何子元素具有使用

隐藏的类。not

和

：has

和然后，如果任何子元素的数据属性

数据访问

等于id为

main

的元素类，也可以这样做

$（“#main.child”）
.not（“：has（.hidden）”）
.has（`[data access=“${$（'#main'）.attr（'class'）}]`）
.css（'color'，'red'）

1.
2.
3.

结合使用

not（）

、

filter（）

和

hasClass（）

$（'.child'）。非（':has（.hidden'））
.find（“[数据访问]”）
.filter（函数（）{
返回$（'#main'）.hasClass（$（this.data（'access'））
})
(完)
.find（“[data type=“text”]”）
.text（'Matches main'）.css（'color'，'red'）

隐藏
没有隐藏
无数据访问

因此，有人提出了希望，希望它能有所帮助

$（文档）.ready（函数（）{
让listOfDivs=$（'.child'）.children（）.filter（（index，el）=>！el.getAttribute（'hidden'）&el.getAttribute（'data-access'））
//让我们检查0索引并将其与#主类名进行比较
if（$（'#main'）[0]&&listOfDivs[0]&&（'#main'）[0]。getAttribute（'class'）==listOfDivs[0]。getAttribute（'data-access'））{
console.log（“匹配”，listOfDivs[0]）
}
});

文件
根据您的第一个描述：


$（函数（）{
函数findDivs（）{
var$root=$（“#main”）；
var rootClass=$root.get（0）.className；
//每个子级中的每个div都没有隐藏的类。。。
返回$（'#main>.child>div:not（.hidden））.filter（函数（idx，elem）{
var access=elem.dataset.access；
//…如果它具有数据访问属性。。。
如果（访问）{
//…其值等于
//id=main的div中的类的
返回访问===rootClass；
}
//如果它没有数据访问权限
//属性，返回
返回true；
});
}
//将其添加到事件处理程序
log（findDivs（））；
});

输出：

0: <div class="area" data-access="agent">​
1: <div class="area">

0: <div data-type="text">​
1: <div data-type="text">

输出：

0: <div class="area" data-access="agent">​
1: <div class="area">

0: <div data-type="text">​
1: <div data-type="text">

0:​
1: 
可以显著简化这一点，但不清楚更高级别的目标是什么。您需要对结果做什么？@charlietfl需要检索表单输入的值，这些值位于具有数据类型属性的div中（如果显示了div）。如果它是隐藏的，那么它可以被忽略。容器的可视性可以在三个级别进行切换，即三个div，因此需要检查其中是否有隐藏的。如果div没有隐藏的类，或者没有数据访问属性，或者它确实有数据访问属性，并且它的值与
agent
匹配，那么它的可视性不清楚该注释的含义is@chalietfl如果输入字段显示给用户，我想检索该值-请参阅更新的标记。然而，输入字段可视性可由三个父div控制。如果区域div具有隐藏类或数据访问属性，且数据访问属性值与div中带有#main（在本例中为其代理）的类的值不匹配，则输入字段被隐藏，因此可以忽略。我需要检查所有三个div（area、section和data type div）以查看输入字段是否可见。好的，那么使用我的筛选方法有什么不起作用呢？可能还可以简化为
$（'.child input'）.filter（function（）{return！$（this）.closest（'.hidden'）.length}）
首先，您没有检查输入字段的所有3个父div，以查看其中是否有任何一个也包含数据访问属性。您正在使用class hidden，not属性，并且
数据访问也可以存在于您孩子的孩子身上。当
listOfDivs
的长度大于1时会发生什么情况？没有，它只会是c检查第一个，但要检查整个列表，只需将if案例包装在一个循环中。