我有以下代码.id为'selected-plays'的第一个'ul'标签有3个子'li'标签(不是后代).我正在尝试将少量CSS规则应用于这些子标记.
我的jQuery代码添加了"水平"类.请注意,选择器仅指向具有id的父元素的子标记#selected-plays
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
});.horizontal {
margin: 10px;
float: left;
list-style: none;
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="selected-plays">
<li>Comedies
<ul>
<li><a href="/asyoulikeit/">As You Like It</a></li>
<li>All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
www.it-ebooks.info Chapter 2 [ 29 ]
</ul>
<li><a href="http://www.shakespeare.co.uk/henryv.htm">
Henry V</a></li>
<li>Richard II</li>
</ul>
</li> …我试图使用Javascript更改两个表的备用行的背景颜色.
我能够使用下面的javascript来做到这一点,但我确信有一种更有效或捷径的方法来使用CSS选择器选择所需的子元素.有人可以帮忙吗？
window.onload = function() {
var elem = document.getElementsByTagName('table')
for (let c = 0; c < elem.length; c++) {
var childElem = elem[c].getElementsByTagName('tr');
for (let d = 0; d < childElem.length; d = d + 2) {
childElem[d].classList.add('alt');
}
}
}tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}<html>
<body>
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr> …代码显示三个按钮.CSS类"隐藏"会在单击带标记的元素时隐藏按钮.代码工作正常,但是'div'当隐藏按钮时,框的大小(id ='切换器')会减少.
即使按钮被隐藏,如何保持原始尺寸？
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher button').toggleClass('hidden');
});
});.hidden{
display:none;
}
.switcher{
float:right;
border:1px solid #000;
background-color:#ddd;
margin:10px;
font-size: .9em;
padding:10px;
}<html>
<head>
<link type='text/css' rel='stylesheet' href='01.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript' src='jqScripts.js'></script>
</head>
<body id='content'>
<div id="container">
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
</div>
</body>
</html>