2

我正在重新配置一个包含 100 多个输入元素的复杂 HTML 文档。我想快速找到任何具有空白 id ( <input type="text" name="something" id="" ...)、只有空格 ( <button name="unimportant" id=" "...) 的 id 或根本不知道的元素（<select name="whatever">以便我可以对源进行必要的更正。

我知道空白 id 的选择器是$('[id=""]')，但是如何使用一个选择器（或连接的选择器）获取所有目标元素？

示例 HTML：

<form id="provision">
  <input type="text" name="something" id="" value="blank id" /><br />
  <input type="text" name="something2" value="no id" /><br />
  <select name="something3"><option>No id</option></select><br />
  <textarea name="something4" id="">Blank id</textarea><br />
  <button name="something5" id=" ">whitespace id</button><br />
  <button name="something6" id="  ">extra whitespace id</button><br />
  <label><input type="radio" name="something7" id="
">Carriage return id</label>
</form>

有关添加红色边框 ( )的示例，请参阅http://jsfiddle.net/jhfrench/VNdL6/ 。.css('border-color', 'red')

4

3 回答 3

3

用逗号分隔选择器：

$("[id=''], [id=' '], :not([id])").css("border-color", "red");

另一种选择是使用过滤：

$("[id]").filter(function() {
    return $.trim(this.id) === "";
}).add(":not([id])").css("border-color", "red");
于 2013-01-16T16:45:13.713 回答
1

为了避免无效 ID 的潜在问题，以及由此产生的不可预测的行为querySelector或其 jQuery 等价物，这可能会影响@VisioN 的解决方案，我可能会尝试类似

[].concat(document.getElementsByTagName("input")).forEach(function(elt){
    if(elt.hasAttribute("id") && /^\s*$/.test(elt.getAttribute("id")) {
        elt.removeAttribute("id");
    }
});

如果您不在 ECMAScript5 环境中，则为等价物。

这大致相当于@Adil 正在做的事情，尽管它删除了无效的 ID，而不是仅仅在它们上设置边框颜色属性。

然后可以使用 CSS 规则进行着色

input:not([id]) { border-color: red; }
于 2013-01-16T17:38:46.973 回答
1

您可以使用filter()过滤掉具有空白 id 或 id 由空格组成的元素。您可以根据需要在过滤器功能中应用复杂的过滤器。

$(':input').filter(function(){
     if($.trim(this.id).length == 0)
           return $(this);
}).css('border-color', 'red')
于 2013-01-16T16:46:23.253 回答