jQuery:检查名称中包含相同部分的类的 DIV 组中的哪些 DIV 具有某些属性

Question

如何检测任意数量的具有预定义类名部分的 DIV 中是否只有一个具有特定样式参数？

例如，我有以下 HTML:

<style>
    .number_one, .number_two {
        display: inline-block;
        height: 100px;
        width: 100px;
        line-height: 100px;
        text-align: center;
        border: 1px solid rgba(0,0,0,0.1);
        cursor: pointer;
    }
</style>

<div class="number_one">Number 1</div>
<div class="number_two">Number 2</div>

<script>
    jQuery(document).ready(function() {
        jQuery(".number_one").click(function() {
            jQuery(".number_one").css("display", "none");
        });
        jQuery(".number_two").click(function() {
            jQuery(".number_two").css("display", "none");
        });
    })
<script>

JSFiddle (但它除了改变DIV的参数之外什么也没做)

例如，假设我可以拥有无​​限数量的 div，但所有这些 div 都将始终共享 number_，那么我如何才能阻止对唯一仍然可见的 DIV 采取任何操作呢？ 作为类(class)名称的一部分。

Answer 1

您可以使用此 CSS 选择器:

jQuery('div[class^="number_"]:visible').length

跟踪可见的数量 <div>他们的类(class)以 number_ 开头。如果您使用通用点击处理程序，您可以检查可见 <div> 的计数s 大于 1，且只允许 <div>在此条件下隐藏。

jQuery('div[class^="number_"]').on('click', function() {
  if (jQuery('div[class^="number_"]:visible').length > 1) {
    jQuery(this).css('display', 'none')
  }
  console.log(jQuery('div[class^="number_"]:visible').length + ' divs left');
});

.number_one,
.number_two,
.number_three {
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number_one">Number 1</div>
<div class="number_two">Number 2</div>
<div class="number_three">Number 3</div>