- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
jquery closest
的文档说明如下:
.closest( selector [, context ] )
...
context
Type: Element
A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
据我了解,粗体文本意味着这两个语句应该是等效的:
set.closest("a");
set.closest("a", set.context);
其中set
是一些jquery集。
但是,情况似乎并非如此:
var context = $("#inner")[0];
var set = $("#el", context);
// the set's context is correctly the "inner" element
set.text("context: " + set.context.id);
// if the set's context is used, this closest should match nothing, but it matches and sets the color
set.closest("#outer").css("color", "red");
// with the context explicitly set, the "outer" is not found and no background color is set
set.closest("#outer", set.context).css("background-color", "blue");
#outer{
width: 100px;
height: 100px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<div id="el"></div>
</div>
</div>
如您所见,当没有显式设置上下文时,该集合的上下文似乎不会被使用,因为 #outer
元素是由 closest
找到的。当显式设置时,#outer
正确地未找到。
文档是否不正确或者我遗漏了什么?
最佳答案
这显然是一个错误,而不是它的预期工作方式。
closest()
的来源是
function (selectors, context) {
var cur,
i = 0,
l = this.length,
matched = [],
pos = rneedsContext.test(selectors) || typeof selectors !== "string"
?
jQuery(selectors, context || this.context)
:
0;
for (; i < l; i++) {
for (cur = this[i]; cur && cur !== context; cur = cur.parentNode) {
// Always skip document fragments
if (cur.nodeType < 11 && (pos ? pos.index(cur) > -1 :
// Don't pass non-elements to Sizzle
cur.nodeType === 1 && jQuery.find.matchesSelector(cur, selectors))) {
matched.push(cur);
break;
}
}
}
return this.pushStack(matched.length > 1 ? jQuery.unique(matched) : matched);
}
值得注意的是方式pos
被定义,它是要搜索最接近父元素的集合,并且 rneedsContext
是正则表达式
/^[\x20\t\r\n\f]*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\([\x20\t\r\n\f]*((?:-\d)?\d*)[\x20\t\r\n\f]*\)|)(?=[^-]|$)/i
如果传入的选择器与该正则表达式不匹配,则不会使用任何上下文,pos
等于 0
,以及 cur
的检查在该集合中只是一起跳过,这看起来非常奇怪。
快速测试表明
var reg = /^[\x20\t\r\n\f]*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\([\x20\t\r\n\f]*((?:-\d)?\d*)[\x20\t\r\n\f]*\)|)(?=[^-]|$)/i;
reg.test('#outer'); // false, no context used
reg.test('#outer:first'); // true, context used
reg.test('#outer:eq(0)'); // true, context used
所以如果你添加一个伪选择器,它会突然使用上下文?
我怀疑这就是我们的意图,而且这似乎是一件奇怪的事情,而且它肯定没有按照文档所说的那样做。
关于jQuery .closest 默认上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34580013/
假设我有一个包含两列的表,如下所示 Size | Time | ------------------ 215 | 24868 | ------------------ 105
我不知道需要更改什么才能消除此错误: Gradient has outdated direction syntax. New syntax is likeclosest-side at 0 0 ins
我有一个包含多行的表。每行都有一个“显示详细信息”按钮和一个“隐藏详细信息”按钮。单击“显示详细信息”后,我希望隐藏详细信息按钮仅显示特定行。我认为 .closest() 函数可以工作,但还没有。 这
今晚在处理一个项目时,我最终为两个不同的页面使用了一个 .js 资源文件。一个页面包含 div 内的文本区域,另一页面包含 td 内的文本区域。想要与此文本区域的 sibling 及其父级的其他子级一
jQuery documentation州 For each element in the set, get the first element that matches the selector b
jquery closest 的文档说明如下: .closest( selector [, context ] ) ... context Type: Element A DOM element wi
我刚刚得到的信息是我的 jQuery 函数无法在 IE 和 Edge 上运行。在控制台中我有消息: 对象不支持“最接近”的属性或方法 这是 jQuery: $('body').on('change',
我目前正在将剑道网格 A 的数据设置为剑道网格 B。但是我遇到了无法读取剑道网格中未定义的属性“最接近”的问题 请帮助我.. 这是kendo B按钮的onclick代码 $("#add-Resour
我有一个 jquery 代码,可以在悬停图像时为 div 制作动画。它工作正常,但问题是我有多个具有相同类的图像和 div,并且动画同时发生在所有图像中。 我需要这个脚本在每个图像/div 中单独工作
$(".toggle-more-less").click(function() { $(this).closest(".article").toggleClass("show-hide
这是我的问题: 我有一个网格,其中图像为灰色,悬停时图像会着色(该图像无法设置为背景图像以获取信息)。 当鼠标悬停在图像上时,会出现一条文本,如果我将鼠标悬停在该文本上方,图像将停止着色。 为了解决这
这是一个更大的应用程序的一部分。 我想做的是在 Jquery 中使用 .closest 提交表单时获取 span1 中的文本。 span1 = $(this).closest("span").html
致所有人:抱歉,如果我不理解 StackOverflow 的协议(protocol)。我将立即努力纠正我在社区中的地位。话虽如此: 我试图根据调用它的内容来更改 jQuery 函数的上下文。在下面的代
目的是在页面加载时突出显示所选单选按钮的单元格。 我有以下代码: JS Fiddle . HTML c
我有这样的 HTML 我想通过单击 btn-go 获取 lat/lon/q 类的值。我知道我们可以使用最接近的方法来做到这一点,但我无法以某种方式实现这一目标。 我的JS $(document
有人可以解释一下为什么要替换以下内容 $('.post_title a').hover(function () { $(this).parent().parent().parent().par
我需要选择输入上方的标签并获取其文本。 有时是这样的: Label q1 有时是这样的: Label q2 我已与 prev() 并列但有时会有在
HTML Normal Cardsshow code <div class="tm card"> ...
我有以下列表: box-shadow:0px 0px rgb(200,200,200);Click 现在我想存储变量内的文本。 我编写了以下代
我有以下 html 结构: 当使用以下 JS 时,我认为它会很好,但它不起作用。没有错误或任何错误,只是行不通。 $('.help').on('click', function () { $(
我是一名优秀的程序员,十分优秀!