JQuery如何获取子元素的子元素,比如<ul id='menu'><li><ul><li><li&g

JQuery如何获取子元素的子元素,比如<ul id='menu'><li><ul><li><li&g,第1张

第一种方法:

使用$("#menu")children()html();

这样会获得"<li><ul><li></li></ul><li>"

第二种方法:

$("#menu > ul > li")

可以考虑用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;}

4、复杂方法:

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像素高的小图标就能完全显露出来,不会被文本遮挡,并且和文本之间有一点间隔。

5、简单方法

ul{list-style-image:url(/images/icongif);}

这种方法不同的浏览器的显示效果会有一些差异,主要是在的垂直位置上。有些浏览器会使和列表项文本的中部位置平齐,有的又会显示得高一些,总之就是有些不一致。

我看到你的js里面并没有调用ul的id啊

<ul class="ui-list ui-list-link ui-border-tb" id="datalist_ul" name="datalist_ul">

你要的是这个ul吧?

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>

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,并引入jquery。

2、在indexhtml中的<script>标签,输入jquery代码:

$('body')append($('top1div span')attr('id'));

3、浏览器运行indexhtml页面,此时成功获取到了top1div类中span标签的id并打印了出来。

以上就是关于JQuery如何获取子元素的子元素,比如<ul id='menu'><li><ul><li></li></ul><li></ul>如何获取最里面的li全部的内容,包括:JQuery如何获取子元素的子元素,比如<ul id='menu'><li><ul><li></li></ul><li></ul>如何获取最里面的li、jquery怎么获得ul中li的个数、为什么我在ul定义了id,但是在javascript中,我打印ID确实空的,访问不到等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9562516.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存