jquery如何获取div中li元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery如何获取div中li元素相关的知识,希望对你有一定的参考价值。

1、通过过滤器获取li数组

var lis = $('div li');//表示获取div下所有的直接或者非直接li节点。

2、循环lis方式获取每个li元素

for(var i=0;i<lis.length;i++)
   var li = lis[i];//获取每个li元素

参考技术A 应该可以的,试一下live方法

live( type, fn )
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是,live()一次只能绑定一个事件。

这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。

.live()与流行的liveQuery插件很像,但有以下几个主要区别:

.live 目前只支持所有事件的子集,支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件,请用die方法
返回值
jQuery

参数
type (String) : 一个或多个用空格分隔的事件名

fn (Function) : 欲绑定的事件处理函数

示例
点击生成的p依然据有同样的功能。

html 代码:

<p>Click me!</p>

jQuery 代码:

$("p").live("click", function()
$(this).after("<p>Another paragraph!</p>");
);
参考技术B <div id="menu">
<ul>
<li><a href="a.html"></a></li>
<li><a href="b.html"></a></li>
<li><a href="c.html"></a></li>
</ul>
</div>

$(document).ready(function ()
//定义url,一般为 li下的a 元素的href的值
var domainUrl = ['a.html','b.html','c.html'];
$("#menu li").each(function (i)
if (window.location.href.toLowerCase().indexOf(domainUrl[i]) > 0)
//onhover是个a被选中的样式,具体你可以自己写
$(this).addClass("onhover");

);
);
不明白追问或加Q20011011
本回答被提问者采纳
参考技术C $('div li')
$('div').find('li')
参考技术D 试试 $('div li')

jquery小测

1.div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has()

$(“div:has(span)”);

2.<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的方法是?

$("li:last");

3.在页面中有三个<div>元素,采用jQuery中的链式写法,隐藏第二个<div>元素,代码是? 提示使用hide()

$(“div :eq(1)”).hide();

 

4.在三个<ul>元素中,分别添加多个<li>元素,通过jQuery中的子元素选择器,将这三个<ul>元素中的第一个 <li>元素隐藏,代码是? 提示使用first-child

$(“li:first-child”).hide();

 

5.在页面的表单中增加了多个<input>类型的复选框元素,其中有的处于选中状态,通过jQuery选择器,将这些 选中状态的元素隐藏,代码为?

$(“from input:checked”).hide();

6.如何获取列表框元素中被选中元素的的值,代码为:

$("select option:selectted").text();

7.使用attr方法,取消id号为test的复选框选中状态代码为:

 $("#test").attr("checked",false);

 

8.在三个<div>元素中,删除第二个元素的代码为?

$(“dov :eq(1)”).remove();

 

9.移除已绑定元素事件的方法是?Bind()  unbind();

nbind();

10.
如何使用show方法以3秒的速度显示一个id号为testdiv元素,代码为?

$("#test").show(3000)

11.编程题

在页面中,添加一个<ul>元素,里面放置多个(至少7个以上)的<li>元素,此外,再添加一个<a>元素.

初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.

  当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.

  当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

2."http://www.w3.org/TR/html4/loose.dtd">

3.<html xmlns="http://www.w3.org/1999/xhtml">

4. <head>

5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

6. <title>New Web Project</title>

7. <script src="js/jQuery1.11.1.js"></script>

8. <script type="text/javascript">

9. $(function() {

10. $(".myclass:visible").hide();

11.

12. $("a[href=#]").click(function(){

13. if($(this).text()=="简化"){

14. $(".myclass:visible").hide();

15. $(this).html("更多");

16. }else{

17. $(".myclass:hidden").show();

18. $(this).html("简化");

19. }

20. });

21. });

22. </script>

23. </head>

24. <body>

25. <ul>

26. <li>1111111111</li>

27. <li>22222222222</li>

28. <li>333333333</li>

29. <li>444444444</li>

30. <li class="myclass">55555555</li>

31. <li class="myclass">66666666</li>

32. <li class="myclass">77777777</li>

33. <li>888888888</li>

34. <a href="#">更多</a>

35. </ul>

36. </body>

37.</html>

 

以上是关于jquery如何获取div中li元素的主要内容,如果未能解决你的问题,请参考以下文章

jquery如何获取li元素

jquery如何实现点击LI标签和下面的LI互换顺序?

jQuery 如何在这段代码中获取 div?

jquery1:

jquery 如何对当前li里 不同级的元素做操作

使用 jquery 的 next() 函数获取列表中的下一个元素时,如何在到达列表末尾后获取第一个元素?