我想在我网站的每个容器中排在addClass "green"第5 位.li.hrul
$("ul li.hr").each(function() {
if ($(this).length = 5) {
$(this).addClass("green");
}
});
PS:如果它只能用CSS,请告诉我怎么样.
请注意,ul有混合元素,如:
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
我需要第5名li.hr.
我在一个页面上有多个列表(多个类别的产品),如下所示:
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<h3>Category 2</h3>
<ul id="category2">
<li>item27</li>
<li>item28</li>
</ul>
列表的数量是可变的.
我想在http://static.railstips.org/orderedlist/demos/quicksilverjs/jquery.html上的演示页面上找到一个过滤器.
但它应该搜索不同的列表.
如果用户搜索"2",则结果应为:
<h3>Category 1</h3>
<ul id="category1">
<li>item2</li>
</ul>
<h3>Category 2</h3>
<ul id="category2">
<li>item27</li>
<li>item28</li>
</ul>
如果他搜索"1"那么它应该是(不显示没有结果的列表的h3标题):
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
</ul>
有人能帮我吗？
提前致谢!
我得到了为什么<p>元素不能包含<ul>元素的技术解释.不幸的是,当这是内容的结构时,这对我没有帮助.
在meta中,我也不理解
对于我实际上想要显示具有正常内容的"内联"项目列表的情况.
此页面建议将列表与段落分开:
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
<p>and is further discussed below.</p>
或使用段落的替代标记:
<div>For instance, this fantastic sentence has bullets relating to
<ul>
<li>wizards,
<li>faster-than-light travel, and
<li>telepathy,
</ul>
and is further discussed below.</div>
但是这两个都让我觉得可怕的黑客攻击HTML5所谓的语义内容.
在第一种情况下,<p>标签在语义上有何意义？更不用说如果我想消除列表周围的间距(如果我有其他列表确实是单独的内容块,那么正确设置样式的实际困难 - 哦!)
在第二种情况下,如果我需要有一个<div>意思是"这是一段内容",我也可以<p>完全放弃,而不必根据段落中出现的内容来回切换.
ISTM最具语义意义的版本可能是这样的:
<p>For instance, this fantastic sentence has bullets relating to
<span class="li">wizards,</span>
<span class="li">faster-than-light travel, …我知道这已经很多次了,但在我的具体情况下我找不到任何解决方案.
我有一个导航栏,<li>如果你愿意,我希望整个链接"或"可点击".现在只有<a>(和<div>我已经摆弄的)是"可点击的".
我尝试过这种li a {display: inner-block; height: 100%; width: 100%}方法,但结果却很可怕.
源代码可以在这里找到:http://jsfiddle.net/prplxr/BrcZK/
<!DOCTYPE html>
<html>
<head>
<title>asdf</title>
</head>
<body>
<div id="wrapper">
<div id="menu">
<div id="innermenu">
<ul id="menulist">
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
<li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
有人有一个很好的解决方案吗？
先感谢您!
我有一个无序列表:
<ul id="myList"></ul>
<div id="loadMore">Load more</div>
我希望用另一个HTML文件中的列表项填充此列表:
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
我想加载前3个列表项,然后在用户点击"加载更多"div时显示接下来的5个项目:
$(document).ready(function () {
// Load the first 3 list items from another HTML file
//$('#myList').load('externalList.html li:lt(3)');
$('#myList li:lt(3)').show();
$('#loadMore').click(function () {
$('#myList li:lt(10)').show();
});
$('#showLess').click(function () {
$('#myList li').not(':lt(3)').hide();
});
});
我需要帮助,因为我希望"加载更多"以显示接下来的5个列表项,但如果HTML文件中有更多列表项,则再次显示"加载更多"div并允许用户显示下一个5项,重复此项,直到显示整个列表.
我怎样才能做到最好？
我创建了以下jsfiddle:http://jsfiddle.net/nFd7C/
这似乎应该是非常容易的,但我很难搞清楚.
我想复制该<li>功能,使光盘图像显示在左侧,但应用于
标签
我有这个,但它没有显示光盘图像.
.list {
margin-top: 15px;
margin-bottom: 15px;
list-style:disc outside none;
display:inline;
}
<p class="list"><em>And Much, Much More!</em></p>
我想尽可能避免使用任何图形来模拟子弹.
谢谢您的帮助
我试图将一个无序列表水平列出(用float:left完成),但它拒绝水平溢出.相反,它会在下一行自动溢出(此外,即使使用overflow-y:none,它也会自动创建一个垂直滚动条.任何想法？
<style type="text/css">
ul {
height:15px;
width:400px;
overflow-y:none;
overflow-x:auto;
}
li {
float:left;
}
</style>
<body>
<div>
<ul id="someList">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
<li>element 5</li>
<li>element 6</li>
<li>element 7</li>
</ul>
</div>
</body>
首先,我知道这个问题已被问过数百万次......而且我已经在这个网站和其他网站上专门查看了这个问题以及其他几个问题.我已尝试过各种不同的变化,但仍无法使其发挥作用.
我试图将无序列表集中在一起.它显示正确,它没有居中.目前,它关闭到中心...但是如果你改变CSS中.nav容器代码中的"width"参数,那么它会改变div的位置.
这是我的CSS:
html *{
font-family: Verdana, Geneva, sans-serif;
}
body {
padding:0px;
margin:0px;
}
.nav-container {
width:460px;
margin: 0 auto;
}
.nav-container ul {
padding: 0px;
list-style:none;
float:left;
}
.nav-container ul li {
display: inline;
}
.nav-container ul a {
text-decoration:none;
padding:5px 0;
width:150px;
color: #ffffff;
background: #317b31;
float:left;
border-left: 1px solid #fff;
text-align:center;
}
.nav-container ul a:hover {
background: #92e792;
color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
color: #ffffff;
background: #12b812; …您好StackOverflow社区!
开门见山!我目前在PHPStorm ...
<ul>
Content
Content
Content
Content
Content
Content
</ul>
显然作为占位符的内容......目前我正在通过这些行单独实现列表标记在每一行,这是非常慢的,因为我当前创建了大量的列表!
有人对如何大大加快这个过程有任何建议吗？
多谢你们!
我有一个DIV菜单设置为100%高度溢出:滚动.在DIV中我有一个ul li.我遇到的问题是它不会让我一直向下滚动以查看最后一个li.我几乎看不到它.
我认为它与我的标题有关,因为当我删除标题时,我可以看到它.当我放回标题时,它会进入浏览器并且无法一直向下滚动以查看最后一个li.
无论李和头的高度几乎相同,这让很多的意义上说,头引起的问题.我认为不是标题,而是我在CSS中做的更多.
为什么我不能一直滚动到底部？解决办法是什么？
此处示例:http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
重复李 20次
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container { …