强制jQuery仅搜索指定元素的子树

Question

有可能以某种方式重新配置jQuery只搜索指定元素的子树吗？

我需要做这样的事情：

var lockToSubtree = function (jq) {
        //reconfigure jq
        return reconfiguredJQuery;
    },

    myJQuery = lockToSubtree(jQuery, '.my-namespace');

所以我有自己的jQuery实例，只在'.my-namespace'中搜索元素。

为了说明我的需求，这里有一个示例HTML：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <div id="divOne" class="someClass"></div>
    <div class="my-namespace">
        <div id="divTwo" class="someClass"></div>
    </div>
</body>
</html>

所以我以后可以在我的代码中使用：

var $el = myJQuery('.someClass');

它只会在.my-namespace的子树中搜索.someClass 。 所以它只返回div#divTwo和div#divOne将被跳过，因为它不在.my-namespace的子.my-namespace 。

关键是，我还需要它来继续搜索.my-namespace的子树，当使用.closest()等jQuery函数时，请参阅最终的代码片段：

var $myJQuery = lockToSubtree(jQuery, '.my-namespace'),
    $el = myJQuery('.someClass'); // $el is the #divTwo element

$el.closest('body'); // finds nothing, because body is not located under .my-namespace

更新：

我同意@Keith认为，可能无法重新配置jQuery以使用.closest方法搜索某些子树，该方法向上搜索。 因此，只有当搜索方向向下时，我才能在子树中搜索。

我想强调一点，我需要jQuery函数具有与原始jQuery（jQuery.fn等属性）相同的功能。

现实生活场景 ：我需要在项目中确定一些第三方库的范围，以便在某种程度的深度之前不会影响HTML。 该库是使用全局jQuery对象的JavaScript缩小代码的一行。 我需要的是将它包装在自调用函数中并传递给jQuery函数的一些修改，它只搜索DOM的某个子树，但包含所有属性作为普通的jQuery。

这段代码可能更好地解释了它：

(function (jQuery) {
    // I am passing jQuery through parameter
    // ... here is the library code
}(/* here I want to inject modified jQuery */));

Answer 1

您可以为jQuery选择器创建一个包装函数，如下所示：

$Q = function (select, opts) {
    return $(".my-namespace", opts).find(select);
};

然后像调用jQuery $Q(".element").children() etc...调用你的包装器。

jSFiddle在这里

您可以使用最接近的传递上下文来执行此操作：

var namespace = $(".my-namespace").get()[0];

$(".foo").closest("p.bar", namespace);

Answer 2

你要求jQuery不支持的东西，因为.closest（）会一直搜索DOM树到文档。 一些非常昂贵的东西，但你要做的就是将.my-namespace克隆到一个文档片段中。 然后，.closest（）不会高于文档片段，因为片段没有父元素。

我建议您编写自己的.closest（）方法以确保停在您想要的位置，然后使用Dormouse的答案进行搜索。

Answer 3

我无法接受@ Dormouse或@ ArunPJohny的答案，因为它们都返回了像jQuery.fn这样没有其他jQuery函数的简单函数，所以不可能使用它们的解决方案。

这是我在阅读@ ArunPJohny的代码后出现的内容，对我来说效果很好：

(function (jQuery) {
    // third party library using my own modified jQuery function
}((function ($) {

    var $wrapper = $('.cms-bootstrap'),
        scopedjQuery = function (selector) {
            return $(selector, $wrapper);
        };

    // Copy all jQuery properties into
    // scopedjQuery so they can be used later
    for (var k in $) {
        if ($.hasOwnProperty(k)) {
            scopedjQuery[k] = $[k];
        }
    }

    return scopedjQuery;

}(window.jQuery.noConflict()))))

强制jQuery仅搜索指定元素的子树

问题描述

3 个解决方案

解决方案1
6 2014-02-21 07:16:42

解决方案2
3 2014-02-21 07:46:13

解决方案3
0 已采纳 2014-02-24 17:04:07

强制jQuery仅搜索指定元素的子树

问题描述

3 个解决方案

解决方案1 6 2014-02-21 07:16:42

解决方案2 3 2014-02-21 07:46:13

解决方案3 0 已采纳 2014-02-24 17:04:07

解决方案1
6 2014-02-21 07:16:42

解决方案2
3 2014-02-21 07:46:13

解决方案3
0 已采纳 2014-02-24 17:04:07