使用jQuery设置css属性

Question

目标是修改类td的所有mytable元素，使其具有css属性visibility:hidden。声明$('.mytable td').css('visibility', 'hidden');似乎没有效果，为什么？

$(document).ready(function () {
	$('.mytable td').css('visibility', 'hidden');
});

.mytable td {
    border:1px solid;
    visibility:inline;
}

<table class="mytable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

Answer 1

您的代码 有效，但您忘了在页面上包含jQuery。

$(document).ready(function () {
	$('.mytable td').css('visibility', 'hidden');
});

.mytable td {
    border:1px solid;
    visibility:inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

请注意，还有一个hide()方法可以设置display:none您的元素。

$('.mytable td').hide();

Answer 2

尝试$('.mytable td').css('display', 'none');

Answer 3

您的代码没有错，您在代码中缺少jQuery库。因此，添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>以包含jQuery库 `

$(document).ready(function() {
  $('.mytable td').css('visibility', 'hidden');
});

.mytable td {
  border: 1px solid;
  visibility: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="mytable">
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

Answer 4

您错过了包含jQuery库：

$(document).ready(function () {
	$('.mytable td').css('visibility', 'hidden');
});

.mytable td {
    border:1px solid;
    visibility:inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

Answer 5

执行此代码。

$(document).ready(function () {
     $('.mytable td').css('display', 'none');
});