jQuery selector from one function to another

Question

How can I pass jQuery selector from one function to another? Does it work like passing variables from one function to another?

i.e:

function hasSelector(){
  var items = $('#item1, #item2, #item3');
  return items;
}

function useSelector(){
  //var items = $('#item1, #item2, #item3');
  //items.on('click'...);
  
  hasSelector().on('click', function(){
    alert(items);
  )};
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Edit: Thanks to some clarifications in comments I've decided to change hasSelector() into object (I had to pass parameter aswell which i forgot to mention here. Nonetheless I've still used a function.)

var hasSelector = {
  items : function(){
    return $('#item1, #item2, #item3');
  }
}

function useSelector(){ 
  hasSelector.items().on('click', function(){
    alert(hasSelector.items(this));
  });
}

useSelector();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item1">Item 1</div>
<div id="item2">Item 2</div>
<div id="item3">Item 3</div>
//returning [obj Obj] since I'm calling on all 3 items at once.

You're returning a jQuery object, not a selector, and naturally passing and returning works just like anything else in the language. You're just missing a closing `'` after `click`. — , Sep 19 '16 at 14:03
Now that you corrected the missing quote, is there some issue you're experiencing that prompted this question? Were you hoping the `items` variable would magically appear at the call site? Are you really just trying to get a reference to the item clicked? What is the *actual* problem? — , Sep 19 '16 at 14:05
`items` won't be defined as it's only defined inside `hasSelector`. Instead of `alert(items)` use `alert(this)` to get the item being clicked or `alert(hasSelector())` to reget the items. — freedomn-m, Sep 19 '16 at 14:08
As an aside: "hasSelector" is not a representative name as that named implies a test "has [item got] selector". Maybe rename to "getItems" or similar? — freedomn-m, Sep 19 '16 at 14:09
@freedomn-m Well, yes, but then how could I connect `hasSelector` with jQuery function like `.on`, `.hide` etc? Is it like, I have to make `$.fn.hasSelector = function()..`? — nehel, Sep 19 '16 at 14:09
Your .on function call has improperly balanced braces. At the end, curly goes before parenthesis. — SchattenJager, Sep 19 '16 at 14:09
Exactly the way you have with `.on` - `hasSelector().on(...` `hasSelector().hide()` — freedomn-m, Sep 19 '16 at 14:10
@nehel: Maybe you could ask about the actual problem instead of tiptoeing around it. — , Sep 19 '16 at 14:11
@squint The problem is I want to get `items` from `hasSelector()` inside `useSelector`. — nehel, Sep 19 '16 at 14:13
OK, but it seems like you already know how to assign a return value to a variable. `var items = ...` And there's some specific use that you're hinting at, but not explaining. — , Sep 19 '16 at 14:16
"get items inside useSelector" - nothing to do with jquery, it's to do with variable scope. Have a read of this: http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — freedomn-m, Sep 19 '16 at 14:16
Thanks for comments guys. Appreciate the answers, they helped me a lot in finding a solution x). — nehel, Sep 19 '16 at 15:25

score 0 · Answer 1 · answered Sep 19 '16 at 14:10

0

you have closed function by wrong symboles )}; correct one is });

function hasSelector(){
  var items = $('#item1, #item2, #item3');
  return items;
}

function useSelector(){
  //var items = $('#item1, #item2, #item3');
  //items.on('click'...);
  hasSelector().on('click', function(){
    alert($(this).html());
  });
}
                                 
useSelector();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="item1">item1</div>
<div id="item2">item2</div>
<div id="item3">item3</div>

answered Sep 19 '16 at 14:10

Haresh Vidja

8,340
3
25
42

1

How does this answer the question: *How can I pass jQuery selector from one function to another?* This would answer "why doesn't my code work" – freedomn-m Sep 19 '16 at 14:11
1

Most likely just another typo in a hastily prepared code example. – Sep 19 '16 at 14:12

score 0 · Answer 2 · answered Sep 19 '16 at 14:18

Since your hasSelector function returns a jQuery object, you could use that.

function hasSelector() {
  var items = $('#item1, #item2, #item3');
  return items;
}

function useSelector(items) {
  items.on('click', function() {
    alert($(this).html());
  });
}

useSelector(hasSelector());

jQuery selector from one function to another

2 Answers2