jquery - 选择具有特定数据属性的div，无需每次循环

Question

<div class='bwrap' data-x='home01'></div>
<div class='bwrap hidden' data-x='home02'></div>
<div class='bwrap hidden' data-x='home03'></div>
<div class='bwrap hidden' data-x='home04'></div>

我想显示 .bwrap 和 data-x='home04' 而没有 each 循环。
根据this我尝试过:

js

var obj = $('.bwrap[data-x="home04"]');
obj.show();

什么也没发生。

Answer 1

如果满足以下条件，您的代码可以正常工作:-

1.在脚本代码之前添加 jQuery 库。

2.code 被包装在 $(document).ready(function(){...});

3.由于 div 没有文本，这就是为什么您可能会混淆它没有显示。向该 div 添加一些文本并检查。

工作示例:-

$(document).ready(function(){
  var obj = $('.bwrap[data-x="home04"]');
  obj.show();
  //can change in one-liner like :- $('.bwrap[data-x="home04"]').show();
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jQuery library needed-->
<div class='bwrap' data-x='home01'>01</div><!-- added text to show that your code worked-->
<div class='bwrap hidden' data-x='home02'>02</div><!-- added text to show that your code worked-->
<div class='bwrap hidden' data-x='home03'>03</div><!-- added text to show that your code worked-->
<div class='bwrap hidden' data-x='home04'>04</div><!-- added text to show that your code worked-->