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}" onmouseover="javascript:changeReadIconOver(this);" onmouseout="javascript:changeReadIconOut(this);">身体健康，万事如意</a></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"): 就可以定位到想要的元素了

赞 (0)

相关推荐

  • js中通过父级进行查找定位元素

    复制代码 代码如下: <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.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents

  • jquery 查找iframe父级页面元素的实现代码

    父页面代码 复制代码 代码如下: <!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> <meta http-equ

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

    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

  • JS获取节点的兄弟,父级,子级元素的方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下: <div id="test"><div></div><div></div></div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementByI

  • 解决jquery无法找到其他父级子集问题的方法

    本文为大家分享了jquery无法找到其他父级子集解决方法,供大家参考,具体内容如下 方法一:结合php解决错乱问题,给选择项加入class删除class解决 情况:页面中纯在两个相同的子集和相同的父级元素 $(function(){ //删除订单功能 $('.ftTr_delA').live('click',function(){ //获取roid var orid =$(this).attr('orid'); //传递roid ftNum=orid; //修改model-ok的属性 $('.m

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom">    <div></div>    <div></div>    <div></div></div> var

  • 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获取所有父级元素及同级元素及子元素的方法(推荐)

    1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素,依次上溯 -------------------------------------------------------------------------------- 2.获取同级元素 $("#id").next(selector) 获

  • JQuery中serialize()、serializeArray()和param()方法示例介绍

    下面是服务器端的jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String content = r

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

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

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

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

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

    复制代码 代码如下: <!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

  • jQuery中的关系查找方法

    目录 一.jQuery关系查找方法 二.jQuery其他关系查找方法 一.jQuery关系查找方法 $(this):在原生的DOM操作中,事件函数内部都有一个this关键字指向的就是触发事件的事件源;在jQuery中将this关键字传递给$()方法,得到的就是指向自己的jQuery对象,这样就可以使用jQuery方法了. parent()父级:jQuery对象都有一个parent()方法,得到的是自己的父级,父级得到的也是一个jQuery对象,可以直接继续打点调用jQuery方法和属性 chil

随机推荐