jQuery中parents()的使用说明

最新推荐文章于 2021-06-12 14:24:44 发布
最新推荐文章于 2021-06-12 14:24:44 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端js 文章标签： jquery
复制代码 代码如下:
<body> 
<div id="one"> 
<div id="two">hello</div> 
<div id="three"> 
<p> 
<a href="#">tonsh</a> 
</p> 
</div> 
</div> 


$("a").parent()将会得到父对象<p> 
$("a").parents()得到父对象为<p><div.3><div.1> 
$("a").parents().filter("div")将得到<div.3><div.1>,还可以写成$("a").parents("div")。 
如果想的到<div.2>对象可以写成这样：$("a").parents("div:eq(0)")。 
如果点击<a>链接时弹出<div.2>中的内容该怎么办？ 
复制代码 代码如下:
var id=$("a").parents("div:eq(1)").children("div:eq(0)").html(); 
alert(id); 


这种类似下标的用法很容易就得到了我们想要的内容，只要没有搞混这些下标的顺序。 
jquery parents使用举例 
 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
p, div, span {margin:2px; padding:1px; } 
div { border:2px white solid; } 
span { cursor:pointer; font-size:12px; } 
.selected { color:blue; } 
b { color:red; display:block; font-size:14px; } 
</style> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 
<p> 
<div> 
<div> 
<span>Hello</span> 
</div> 
<span>Hello Again</span> 
</div> 
<div> 
<span>And Hello Again</span> 
</div> 
</p> 
<b>点击Hellos来切换父元素</b> 
<a href="http://www.jb51.cn">素材下载</a> 
<a href="http://tools.jb51.net">站长工具</a> 
<a href="http://s.jb51.net">服务器软件</a> 
<a href="http://www.baidu.com">百度</a> 
<a href="http://www.jb51.net">脚本之家</a> 
<script> 
function showParents() { 
$("div").css("border-color", "white"); 
var len = $("span.selected") 
.parents("div") 
.css("border", "2px red solid") 
.length; 
$("b").text("Unique div parents: " + len); 
} 
$("span").click(function () { 
$(this).toggleClass("selected"); 
showParents(); 
}); 
</script> 
</body> 
</html> 

详细出处参考：http://www.jb51.net/article/25414.htm
賣逗逗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery parent和parents的区别分析
12-09
下面列出例子说明： 代码如下:’div1′>’div2′><p></p></div><div id=’div3′ class=’a’><p></p></div><div id=’div4′><p></p></div></div>$(‘p’).parent()取到的是div2,div3,div4$(‘p’).parent(‘.a’)...
jQuery中parent方法与parents方法
weixin_44764207的博客
11-09 901
1、parent方法 得到一个唯一父元素的元素集合 2、parents方法 取得包含着所有祖先元素的元素集合 具体请看以下示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/j...
jQuery中parent与parents方法
ANFO的博客
11-09 364
在jQuery中有两个可以获取父标签的方法parent()和parents()，二者的区别在于，parent()方法获取的父标签是距离调用者最近的父标签，而parents()方法获取的父标签是包含调用者的所有父标签组成的数组。 以下是代码示例： 首先用属性选择器选中form标签中type为submit的input标签，然后先调用parent方法，并将其jQuery对象转换为DOM对象再打印； ...
jQuery parents()方法
IT_Boss的博客
05-07 1159
parents()方法返回被选元素的所有祖先元素。 DOM树：该方法从父元素向上遍历DOM元素的祖先，直至文档根元素的所有路径（<html>）。 如果filler参数为空，该方法将从直接父元素直至<body>和<html>的所有路径中选取元素集合中的所有祖先，因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。 该方法与closest()都是向上遍历D...
jQuery 遍历 - parents() 方法
麦叔
06-02 1438
一.前言 首先交代一下使用场景: 上图是一个微信投票的功能,当我们点击某个用户进行投票,后台响应成功以后。在不刷新页面的情况下，我们需要在js中更新该用户票数。由于点击事件是绑定在投票按钮，那么我们如何更新当前点击用户的票数？这里就要用到jQuery 遍历 - parents() 方法。 二.方法详解 关于parents() 方法的详情介绍,大家可以参考jQuery 遍历 - parents(...
JQuery 遍历 祖先/同胞/后代/过滤
IT诗人
09-03 357
祖先 .parent()直接父级元素 .parents()所有祖先元素 可过滤   示例：$('#id').parents('li') .parentuntil()两个给定元素之间的所有祖先元素   示例：$('#id').parentuntil('div') 同胞 .siblings() 所有同胞元素 .next()下一同胞元素 .nextall() 所有跟随的同胞元素 .nex...
jquery 关于event.target使用的几点说明介绍
10-27
但是，如果我们在异步操作如`$.post`的回调函数中使用`this`，它的含义可能已经发生了变化，不再指向原来的按钮。为了避免这种问题，我们可以保存`event.target`的引用，确保始终能够访问到原始的触发元素： ```...
jQuery实现视频展示效果
10-15
我们首先通过 jQuery 的 `parents()` 方法找到最近的共同祖先元素 `.v_show`，然后使用 `find()` 方法找到 `.v_content_list` 和 `.v_content`。获取到这些元素后，我们可以用 `width()` 方法计算出每个版面的宽度，...
jquery 获取父节点 html,jq使用parent和parents方法获取父节点
weixin_29008691的博客
06-09 962
通过选择器一般只能获取指定标识的节点，或者获取子节点。有些场景下，往往需要根据当前节点找到满足条件的父节点。这个可以通过相应的方法来实现。1、parent方法该方法可以获取元素的直接父节点。我们还是通过例子来说明testjs代码如下var obj = $("#aid").parent(); //获取到的是aid元素的直接父节点div元素alert(obj.html());可以指定parent方法的...
jQuery查找——parent/parents/parentsUntil/closest
qq_27009517的博客
06-12 1491
jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素，具体用法不同 parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合。 parents()：沿 DOM 树向上遍历，直到文档的根元素(<html>)为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回零个、一个或多个元素。 closest()：沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。返回零个
Js中的Parent对象
热门推荐
wang725的专栏
12-03 3万+
Js中的Parent对象  文章分类:Web前端   该变更永远指分割窗口最高层次的浏览器窗口。 如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。  parent：  该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。  opener：  指用WIND
parents()用法
回忆独殇的专栏
07-15 935
parents用法 $(document).ready(function(){ $('a').hover(function(){ $(this).parents('p').addClass('highlight'); },function(){ $(this).parents('p').removeClass('highlight'); }); }); .highlight{
jquery的parents()和parents的比较
Java海洋
02-11 1284
<br />jquery有两个函数parent()和parents().通过这两个函数可以找到一个对象的父对象，又称作jquery的选择器。举个例子：<body><br /> <div id="one"><br /> <div id="two">hello</div><br /> <div id="three"><br /> <p><br /> <a href="#">tonsh</a><br /> </p><br /> </div><br />
简述JS的parent方法与parents方法的区分
飞翔的企鹅的博客
11-09 6658
介绍 parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合 parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素） 区分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></titl...
jQuery遍历之parent()方法
qq_37036642的博客
08-03 431
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法 因为是父元素，这个方法只会向上查找一级 理解节点查找关系： 1 查找ul的父元素div, $(ul).parent()，就是这样简单的表达 parent()无参数 parent
jQuery中parent()方法与parents()方法
nairuozi的博客
11-09 813
1.parent([expr]) ：取得一个包含着所有匹配元素的唯一父元素的元素集合。 2.parents([expr]) ：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。 3.children([expr]) ：获取匹配元素的所有子元素组成的集合；该方法只考虑子元素而不考虑任何后代元素。 <form > <input type="text"> ...
vue的$parent属性
qq_41629522的博客
07-01 1万+
1.首先 一般默认的来说，我们带 $ 符号的我们基本默认是vue实例对象身上的也就是 vue中的 this，我们可以console一下this， 这上面有很多的属性，我们比较常用的 有$refs , $attrs, tips: 我们绑定的时候应该是单数形式比如： $ref 获取时候应该是复数形式。 2. $refs 让我们可以在父组件中进行操作子组件的数据以及方法。 $parents 让我们可以在子组件中对父组件的data和方法操作。 ...
.parents()  属性详解
suxue1994的博客
02-26 1357
在js中单引号和双引号都是一样的，平时使用的时候尽量用单引号，只有碰到嵌套的时候才会同时用两种引号 parents()函数用于选取每个匹配元素的祖先元素，并以jQuery对象的形式返回。 你还可以使用选择器来进一步缩小选取范围，只选取其中符合指定选择器的元素。 该函数属于jQuery对象(实例)。 语法 jQueryObject.parents( [ ...
jQuery Autocomplete 使用详细说明
最新发布
06-09
jQuery Autocomplete 是一个 jQuery 插件，用于实现输入框自动完成功能。它可以根据用户输入的文本，从预设的数据源中提供匹配项，并在下拉列表中展示这些项供用户选择。 下面是使用 jQuery Autocomplete 的详细步骤： 1. 引入 jQuery 和 jQuery Autocomplete 插件的 JS 文件。可以从 jQuery 和 jQuery Autocomplete 的官方网站上下载相关文件。 ```html <script src="jquery.min.js"></script> <script src="jquery.autocomplete.min.js"></script> ``` 2. 在 HTML 中添加一个输入框，并为其设置一个 ID。 ```html <input type="text" id="autocomplete-input"> ``` 3. 在 JavaScript 中初始化 Autocomplete 插件。需要指定输入框的 ID、数据源和其他选项。 ```javascript $('#autocomplete-input').autocomplete({ lookup: ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'], minChars: 1, onSelect: function (suggestion) { alert('You selected: ' + suggestion.value); } }); ``` 其中，`lookup` 属性指定了数据源，可以是一个数组或一个函数。`minChars` 属性指定了最小匹配字符数，当用户输入的字符数小于该值时，不会触发自动完成。`onSelect` 属性指定了用户选择某个匹配项后的回调函数。 4. 根据需要自定义 Autocomplete 的样式。可以使用 CSS 修改下拉列表的样式，或修改 Autocomplete 插件的默认选项。 ```css .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; cursor: pointer; } .autocomplete-suggestion:hover { background: #F0F0F0; } .autocomplete-group { font-weight: bold; } ``` 以上就是使用 jQuery Autocomplete 实现输入框自动完成的详细步骤。可以根据实际需求，自定义 Autocomplete 的选项和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值