admin管理员组

文章数量:1332361

Is it possible to somehow reconfigure jQuery to search only in a subtree of a specified element?

I need to do something like this:

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

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

So I have my own instance of jQuery which searches elements only inside '.my-namespace'.

To illustrate my needs here is a sample 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>

So I can later use in my code:

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

And it will search .someClass only in a subtree of a .my-namespace. So it will return only div#divTwo and div#divOne will be skipped because it is not located under a subtree of .my-namespace.

The point is, that I need it to keep searching in a subtree of .my-namespace also when using jQuery functions like .closest() etc., see the final code snippet:

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

UPDATE:

I agree with @Keith that it is probably not possible to reconfigure jQuery to search in some subtree also with .closest method, which searches upwards. Thus I will be OK with searching in a subtree only when the search direction is down.

I would like to emphasize that I need the jQuery function to have the same functionality like original jQuery (properties like jQuery.fn etc.).

The real life scenario: I need to scope some third party library in our project so it would not affect HTML until some level of depth. The library is a one line of a JavaScript minified code using global jQuery object. All I need is to wrap it in self-invoking function and pass to it some modification of jQuery function which searches only in some subtree of a DOM, but contains all the properties as normal jQuery.

This code maybe explains it better:

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

Is it possible to somehow reconfigure jQuery to search only in a subtree of a specified element?

I need to do something like this:

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

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

So I have my own instance of jQuery which searches elements only inside '.my-namespace'.

To illustrate my needs here is a sample 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>

So I can later use in my code:

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

And it will search .someClass only in a subtree of a .my-namespace. So it will return only div#divTwo and div#divOne will be skipped because it is not located under a subtree of .my-namespace.

The point is, that I need it to keep searching in a subtree of .my-namespace also when using jQuery functions like .closest() etc., see the final code snippet:

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

UPDATE:

I agree with @Keith that it is probably not possible to reconfigure jQuery to search in some subtree also with .closest method, which searches upwards. Thus I will be OK with searching in a subtree only when the search direction is down.

I would like to emphasize that I need the jQuery function to have the same functionality like original jQuery (properties like jQuery.fn etc.).

The real life scenario: I need to scope some third party library in our project so it would not affect HTML until some level of depth. The library is a one line of a JavaScript minified code using global jQuery object. All I need is to wrap it in self-invoking function and pass to it some modification of jQuery function which searches only in some subtree of a DOM, but contains all the properties as normal jQuery.

This code maybe explains it better:

(function (jQuery) {
    // I am passing jQuery through parameter
    // ... here is the library code
}(/* here I want to inject modified jQuery */));
  • javascript
  • jquery
Share Improve this question edited Feb 24, 2014 at 17:00 Roman Mazur asked Feb 21, 2014 at 6:59 Roman MazurRoman Mazur 5126 silver badges17 bronze badges 4
  • post your html and describe more about what you want – Anoop Joshi P Commented Feb 21, 2014 at 7:00
  • what is .my-namespace - a css class ? – Chris Moutray Commented Feb 21, 2014 at 7:02
  • 1 try jsfiddle/arunpjohny/MEAt7/1 – Arun P Johny Commented Feb 21, 2014 at 7:11
  • @ArunPJohny That is exactly what I was talking about! But like I said, I also need to keep searching inside .parent when using functions like .closest(), which are searching upwards in a DOM tree. – Roman Mazur Commented Feb 21, 2014 at 7:15
Add a ment  | 

3 Answers 3

Reset to default 6

You can create a wrapper function for the jQuery selector like so:

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

And then just call your wrapper as you would jQuery $Q(".element").children() etc....

jSFiddle here

You can do this with closest to pass a context:

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

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

You are asking for something that jQuery does not support, since .closest() will search up the DOM tree all the way to the document. Something terribly expensive, but that will do what you are asking is to clone the .my-namespace into a document fragment. Then, .closest() will not go higher than the document fragment because fragments do not have parents.

I would suggest writing your own .closest() method to make sure you stop where you want, and then use Dormouse's answer for searching down.

I can't accept @Dormouse's or @ArunPJohny's answers because both returns simple functions which do not have another jQuery functions inside like jQuery.fn, so it is impossible to use their solutions.

Here is what I came up after reading @ArunPJohny's code and what works fine for me:

(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()))))

本文标签： javascriptForce jQuery to search only in a subtree of a specified elementStack Overflow

版权声明：本文标题：javascript - Force jQuery to search only in a subtree of a specified element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742317702a2452151.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。