javascript - 复杂的 CSS 选择器 - 如何要求可见

Question

我正在编写一个 CSS 选择器，到目前为止我一直在努力:

input[placeholder*='mail']

但我想确保它不会找到不可见(即:不可见)元素。

我一直在模式的不同地方尝试 :visible(因为我找不到关于 CSS 选择器词法分析器的好引用，但运气不好:

input[placeholder:visible*='mail']
input:visible[placeholder*='mail']
input[placeholder*='mail']:visible

我该怎么做？谁有关于学习更复杂的选择器格式的良好引用？

Answer 1

:visible 是一个 jQuery 选择器。不是 CSS。

而且你不能在元素的属性上使用它，比如 placeholder.

要检查是否有输入值(这使得占位符“不可见”)，您需要使用一些客户端代码。

jQuery 看起来像这样:

$("input[placeholder*='mail']").each(function(){
  if( $(this).val() != "" ){
    // Do something.
    // ...
  }
});

---

要“过滤掉不可见元素”并仅保留可见元素:

var visible = $("input[placeholder*='mail']:visible").length;
console.log(visible+" elements are visible.");

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="one" placeholder="My mail">
<input type="text" id="two" placeholder="Your mail">
<input type="text" id="three" class="hidden" placeholder="Junk mail">
<input type="hidden" id="four" placeholder="Cool mail">