Question

这是div结构

<div id="parnet1">
   <div id="subParnet1">
     <img src="smiley.png" class="faces">
   </div>
</div>
<div id="parnet2">
   <div id="subParnet2">
     <img src="sadf.png" class="faces">
   </div>
</div>
<div id="parnet3">
   <div id="subParnet3">
     <img src="grumpy.png" class="faces">
   </div>
</div>

我想使用jQuery使grumpy.png不可见。以下是我的尝试。不起作用。

$('#subParnet3').find('.faces').css('display', 'none');

Answer 1

适用于jQuery：

$('#subParnet3').find('.faces').css('display', 'none');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parnet1">
  <div id="subParnet1">
    <img src="smiley.png" class="faces">
  </div>
</div>
<div id="parnet2">
  <div id="subParnet2">
    <img src="sadf.png" class="faces">
  </div>
</div>
<div id="parnet3">
  <div id="subParnet3">
    <img src="grumpy.png" class="faces">
  </div>
</div>

您还可以使用.hide()：

$('#subParnet3').find('.faces').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parnet1">
  <div id="subParnet1">
    <img src="smiley.png" class="faces">
  </div>
</div>
<div id="parnet2">
  <div id="subParnet2">
    <img src="sadf.png" class="faces">
  </div>
</div>
<div id="parnet3">
  <div id="subParnet3">
    <img src="grumpy.png" class="faces">
  </div>
</div>

隐藏grumpy.png。检查一些CSS中是否包含!important，或者您是否忘记包含jQuery。

Answer 2

你的榜样很好。你有没有

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

在你的档案中？这可能会导致您的问题。如果没有，我建议您使用$('#subParnet3').find('.faces').hide();进行尝试，这会将孩子隐藏在faces类中。

包含google / microsoft lib之后，你应该有这样的东西：

<script>
    $(document).ready(function(){
        $('#subParnet3').find('.faces').hide();
    });
</script>

通过div id定位div类

2 个答案: