jquery中通过父级查找进行定位示例

如果想要查找到有icon这个class的span除了用原始的代码还可以用父级查询的方法进行定位,具体的实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
 
复制代码 代码如下:

<ul id=“newslist”>
<li> <span class="fr w160 tl">2013-06-24</span>
<span class="news_list_icon fl mr8 icon" ></span>
<span class="fl"><a href="{href}" onmouseover="javascript:changeReadIconOver(this);" onmouseout="javascript:changeReadIconOut(this);">身体健康,万事如意</a>& lt;/span>'
</li>
</ul>

如果想要查找到有icon这个class的span(对其进行操作,将news_list_icon换为news_list_icon_hover),除了用原始的代码

复制代码 代码如下:

$("#newslist li").hover(function(){
$("#newslist li").find(".icon").addClass("news_list_icon_hover") },function(){ $("#newslist li").find(".icon").removeClass("news_list_icon_hover") } );

还可以用父级查询的方法进行定位,具体如下:

复制代码 代码如下:

function changeReadIconOver(alink) {
$(alink).parent().parent().find(".icon").addClass("news_list_icon_hover");
}
function changeReadIconOut(alink) {
$(alink).parent().parent().find(".icon").removeClass("news_list_icon_hover");
}

$(alink).parent(): 指的是<span class="fl">这个标签
$(alink).parent().parent(): 指的是<li>这个标签$(alink).parent().parent().find(".icon"): 就可以定位到想要的元素了

时间: 2024-12-02 14:39:48

jquery中通过父级查找进行定位示例的相关文章

jquery中通过父级查找进行定位示例_jquery

复制代码 代码如下: <ul id="newslist"> <li> <span class="fr w160 tl">2013-06-24</span> <span class="news_list_icon fl mr8 icon" ></span> <span class="fl"><a href="{href}"

浅析jQuery中常用的元素查找方法总结

本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass")   选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用

js中通过父级进行查找定位元素_javascript技巧

复制代码 代码如下: <ul id="newslist"> <li> <span class="fr w160 tl">2013-06-24</span> <span class="news_list_icon fl mr8 icon" ></span> <span class="fl"><a href="{href}"

jQuery教程:选择父级下的子级元素

文章简介: 到目前为止,我写的jQuery教程已经到了第八章了,不知大家现在对jQuery是否还比较陌生,如果你还很陌生的话,没关系.css学习网也在教程的后面留下了作业或案例,希望朋友们能认真的完成作业认真的看案例.我相信大家一定能好好的驾驭这匹烈马的.  到目前为止,我写的jQuery教程已经到了第八章了,不知大家现在对jQuery是否还比较陌生,如果你还很陌生的话,没关系.css学习网也在教程的后面留下了作业或案例,希望朋友们能认真的完成作业认真的看案例.我相信大家一定能好好的驾驭这匹烈马

jquery获取div距离窗口和父级dv的距离示例_jquery

jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div). (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ margin: 0px; padding: 0px; } div{ margin: 0px auto; } .a{ width: 960px; height: 200px; } .pa

jQuery中使用Ajax获取JSON格式数据示例代码_jquery

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于"名称"和"值"的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. 下面就使用jQuery读取music.txt文件中的JSON数据格式信息. 首先,music.txt中的内容如下: 复制代码 代码如下: [ {"optionKey":"1"

浅析jQuery中常用的元素查找方法总结_jquery

$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass")   选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.mycla

Sql Server中通过父记录查找出所有关联的子记录

可查4级Sql代码 select menu_id,menu_name,Father_Id from Sys_Menu where menu_id='18' or Father_Id=18 or -- 一级.二级 Father_Id in (select menu_id from Sys_Menu a where menu_id='18' or Father_Id=18) or -- 三级 father_id in (select menu_id from sys_menu where Fathe

对Jquery中的ajax再封装,简化操作示例_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>jQueryAja