Question

我是新jQuery。如何根据div标签中的数据属性隐藏元素。

我的示例代码。

谢谢。

<script>
$(document).ready(function(){

$("div").each(function()
{
   var c=$( "div" ).data( "role" );
   if(c=="page")
   {
   $(this).hide();
   }
   }
   );
});
</script>


<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>
<p>sjhfdsjfhdfjdhsf</p>
<p>jfhdzsdfsdfdsfdsfdsfssjfdhss</p>

</div>
<div data-role="pages" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>
<p>sjhfdsjfhdfjdhsf</p>
<p>jfhdsjfdhss</p>

</div>

Answer 1

您需要使用.attr方法来通过jQuery访问存储在数据属性中的数据。下面的示例：

$(document).ready(function(){
  $('div').each(function() {
    var c = $(this).attr('data-role');
    if(c === "page") {
      $(this).hide();
    }
  });
});

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>
  <p>sjhfdsjfhdfjdhsf</p>
  <p>jfhdzsdfsdfdsfdsfdsfssjfdhss</p>
</div>

<div data-role="pages" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>
  <p>sjhfdsjfhdfjdhsf</p>
  <p>jfhdsjfdhss</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

要向您展示除循环之外的另一种方法，您可以仅使用CSS选择器选择所有<div>标签，然后将其隐藏。

一些例子：

$('[data-role']).hide(); // hides all DOM tags which have a "data-role" attribute.
$('div[data-role]').hide(); // hides all <div> tags which have a "data-role" attribute.
$('div[data-role=page]').hide(); // hides all <div> tags which have a "data-role" attribute equals to "page".

如何使用jQuery访问多个div元素上的数据属性

2 个答案: