Forcing jQuery to limit its scope to some div

Question

Is there a way to replace $ with something like $_sub whose actions are contained within a div? For example, I want to inject $_sub to a function and instead of using $, the function uses $_sub to limit its scope within the div while preserving the methods that can be called on $ (e.g I should be able to do $_sub.ajax())

<a href="#">Outside </a>
<div id="contents" >
    <a href="#">Inside </a>
</div>

function modify($_sub) {
    var inner_a = $_sub("a"); //should return only the inner <a>
}

context will not work for me in this scenario. I want the function to think $_sub is just like $. I can change the function signature to rename $_sub to $ so that the function doesn't even know that it is using a scope limited version of actual $.

design such a way to limit scoping with selector, instead of jquery, because, it loads and works on entire DOM not on specific node in DOM tree. — user669789, Jul 06 '16 at 16:54
Just pass a context in as second parameter ... http://stackoverflow.com/questions/16422478/what-is-context-in-jquery-selector — CBroe, Jul 06 '16 at 16:55
`$_sub = $` wil copy the jquery reference to the new variable. but its scope won't be just linited to what dom elemetns it can access. Why don't you limit the scope in the parent bases in yur selector? what are yu trying to accomplish — Abdul Rehman, Jul 06 '16 at 16:55
You could use a more specific selector. EG: `$_sub("#contents a")` which will grab any `a` elements inside the `#contents` element. — Mr. Meeseeks, Jul 06 '16 at 16:57
The reason is I want $_sub to behave similar to what $ is doing without the function being aware that it's scope is limited to the div. I might as well rename $_sub to $ in the function signature, so that the function doesn't even know it got modified. — Vishnu, Jul 06 '16 at 17:10
*"I want $_sub to behave similar to what $ is doing without the function being aware that it's scope is limited to the div."* ~ Can you please explain why you'd need this? — Sparky, Jul 06 '16 at 17:29
Let's say the div represents a widget of some sorts. And the javascript should not modify any other elements on the page. One way is to inject $ to the widget function so that modifications are contained within the widget div. — Vishnu, Jul 06 '16 at 17:37

score 3 · Answer 1 · edited May 23 '17 at 10:28

3

Use context: jQuery( selector [, context ] )

Just pass the second parameter.

In your example it would be: var inner_a = $("a", "#contents") which is equivalent to $("#contents").find("a")

What is "context" in jQuery selector?

edited May 23 '17 at 10:28

Community

1
1

answered Jul 06 '16 at 17:03

maxwell

857
8
16

context will not work for me in this scenario. I want the function to think $_sub is just like $. I can change the function signature to rename $_sub to $ so that the function doesn't even know that it is using a scope limited version of actual $ – Vishnu Jul 06 '16 at 17:18

score 0 · Answer 2 · answered Jul 06 '16 at 17:44

The context option mentioned in other answers seems more sane, but if you really can't use it you could instead curry a function to provide the context automatically, then pass the curried function into your modify function:

var curry = function() {
  var args = Array.prototype.slice.call(arguments);
  var fn   = args[0];
  var after = args.slice(1);

  return function() {
    return fn.apply(this, after.concat(
      Array.prototype.slice.call(arguments)));
  };
};    

var _$_sub = function(context, sel) {
  return $(context).find(sel);
}

var $_sub = curry(_$_sub, '#content');

function modify($$) {
  var inner_a = $$("a");
  console.log(inner_a.text());
}

modify($_sub);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="">Outside</a>
<div id="content">
  <a href="">Inside</a>
</div>

but the curried function returns a jquery element and not jquery function($). So I don't think you can call methods on $$ that you normally would call on $ (e.g, $$.ajax will not work) — Vishnu, Jul 06 '16 at 18:27

Forcing jQuery to limit its scope to some div

2 Answers2