PHP语言遍历以数组形式的数据：
<ul><php foreach($data => $v){ >
<li><php echo $v['name'];></li>
<php } >
</ul>
$data代表数据库查询出来的数据，$v代表自定义$data数组的名称，$v['name']代表该数组的name单元的值
<ul id="list">
<li></li><li></li>
</ul>
----
<script type="text/javascript">
alert(documentgetElementById("list")getElementsByTagName("li")length);
</script>
----
步骤：
1、给UL一个ID值
2、使用documentgetElementById获取到这个ID值对应的UL对象
3、再使用getElementsByTagName，获取到UL对象底下的LI集合
4、最后获取这个LI集合的length值，就得到了LI的数量
<!doctype html>
<html>
<head>
<style>
{margin: 0;padding: 0;}
#tab{
margin: 0 auto;
width: 460px;
height: 230px;
list-style: none;
}
#tab li{
float: left;
height: 33%;
width:32%;
background: green;
border: 1px solid black;
}
first{
height: 66% !important;
background: blue !important;
padding-bottom: 2px;
}
</style>
</head>
<body>
<ul id='tab'>
<li class='first'></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
虽然li可以布局出来，但是并不推荐用li做，这是table标签干的事情
<li></li>标签组合肯定不止一个,它都有自己的id,比如0;我建议给<p class="yangbanfang"></p>中a标签和<p class="canguan"></p>中input标签加一个共同元素,比如<a id="a0"></a>;<input listid="0" onlick="open2(this)"></input>
function open2(obj)
{
listid = objgetAttribute("listid");
alert(documentgetElementById("a"+listid)InnerHTML());
}
要不就就<input onlick="open2(this)"></input>
function open2(obj)
{
var node_li = objparentNodeparentNodeparentNode;
alert(node_li documentgetElementsByTagName("a")[0]InnerHTML());
}
另外估计有的函数名我写错了,我对js不熟
1楼正解 我替楼主试过了
<html><head><title></title></head>
<body onload="ons()">
<ul id="parent">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script>
function ons(){
var ul = documentgetElementById('parent');
var lis = ulgetElementsByTagName('li');
for(var i=0;i<lislength;i++){
lis[i]onclick = function(){
alert(thisinnerHTML);
}
}
}
</script>
</html>
可以考虑用length属性， jquery代码: $(“#ulname li”)length。
1、ul 是 Unordered List（无序列表）的缩写。与之相对的有<ol>有序列表标签，列表里的项目用<li>标签记述，所有主流浏览器都支持 <ul> 标签。在 HTML 401 中，ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。
2、<li> 是列表项目标签，定义列表项目。<li> 标签支持全局属性，<li> 标签支持所有 HTML 事件属性。在 HTML 401 中，li 元素的 "type" 和 "value" 属性是不被赞成使用的。在 XHTML 10 Strict DTD 中，li 元素的 "type" 和 "value" 属性是不被支持的。
3、ul和li常规方法：
li {background: url(/images/icongif) no-repeat 0px 50%; padding-left:17px;}
1、复杂方法：
ul {list-style:none;}
li{background: url(/images/icongif) no-repeat 0px 50%; padding-left:17px;}
可以解决上面的浏览器不兼容的问题。首先，清除默认的项目符号，然后加上我们自己的背景。no-repeat告诉浏览器不要平铺这张，0px 50%告诉背景应该位于距左侧0px 且竖直方向位于顶部往下50%处，实际上就是在竖直方向居中。我们在左侧加上了17px的边距，这样那些15px宽5像素高的小图标就能完全显露出来，不会被文本遮挡，并且和文本之间有一点间隔。
1、简单方法
ul{list-style-image:url(/images/icongif);}
这种方法不同的浏览器的显示效果会有一些差异，主要是在的垂直位置上。有些浏览器会使和列表项文本的中部位置平齐，有的又会显示得高一些，总之就是有些不一致。
1、新建一个html文件，命名为testhtml。
2、在testhtml文件内，创建一个div模块，在div标签内，使用ul、li标签创建一个无序列表。
3、在testhtml文件内，设置div的class为mydiv，主要用于设置div的css样式。
4、在css标签内，通过class设置div的宽度为300px，高度为200px，背景颜色为灰色。
5、在testhtml文件内，再设置无序列表ul的样式 ，使用width属性设置其宽度为100px，同时使用margin属性设置其居中显示。
6、在浏览器打开testhtml文件，查看实现的效果。
<!doctype html>
<head>
<meta charset="UTF-8">
<title>得到li的数量</title>
<script type="text/javascript" src=">
以上就是关于读取数据库，并在html中运用ul和li实现循环输出全部的内容，包括:读取数据库，并在html中运用ul和li实现循环输出、如何用js获取ul下li数量的值、HTML 用 Li 不相同的 布局等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）