Question

我有一个div列表，有些有ID，有些没有。我想找到ID匹配id=""的类中的所有div，并将内部文本更改为"no data available"。这可能吗？

我尝试使用$("*[id]")，但是没有用。这就是我的清单。

<div class="main">
  <div id="1"></div>
  <div id="2"></div>
  <div id=""></div>
  <div id="4"></div>
  <div id=""></div>
  <div id=""></div>
  <div id="7"></div>
</div>

Answer 1

显然，某些浏览器（例如Chrome）会使用您的空ID，并将其从id=""更改为id。处理此问题的一种方法是遍历它们并检查一个空值：

$("div[id]").each(function(){
    if(this.id==='')$(this).html('no data available')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div id="1">1</div>
  <div id="2">2</div>
  <div id=""></div>
  <div id="4">4</div>
  <div id=""></div>
  <div id=""></div>
  <div id="7">7</div>
</div>

Answer 2

您可以只使用CSS来定位属性中没有值的元素。不需要JavaScript。

div [id] {
   background-color: green;
   width: 200px;
   height: 1.5em;
   margin: .5em;
}

div [id=""] {
   background-color: red;
}

div [id=""]::after {
  content: "no data available"
}

<div class="main">
  <div id="1"></div>
  <div id="2"></div>
  <div id=""></div>
  <div id="4"></div>
  <div id=""></div>
  <div id=""></div>
  <div id="7"></div>
</div>

如果您真的想使用JavaScript / jQuery进行操作，则只需选择元素并过滤出具有ID的元素即可。

$('div[id]').filter((i,e)=>!e.id.length).text('no data available')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div id="1"></div>
  <div id="2"></div>
  <div id=""></div>
  <div id="4"></div>
  <div id=""></div>
  <div id=""></div>
  <div id="7"></div>
</div>

Answer 3

您可以过滤空ID。

$(".main div").filter(function() {
      return !$(this).attr("id");      
});

jQuery查找所有id =“”的div并更改其文本

3 个答案: