how to add multiple "actual" element objects in JQuery selector

Question

I am working on Google Apps Script and using JQuery. I want to put multiple actual elements in the JQuery selector. I want to put actual elements in the selector.

I want:

$(kojiNameElem, tankaElem, suryoElem, unitElem)

not like(it works though):

$(".kojiName, .tanka, .suryo, .unit")

Please see this code followed:

var kojiNameElem = $("#koji_"+koji_id).find(".kojiName");
  var tankaElem = $("#koji_"+koji_id).find(".tanka");
  var suryoElem = $("#koji_"+koji_id).find(".suryo");
  var unitElem = $("#koji_"+koji_id).find(".unit");

  $(kojiNameElem, tankaElem, suryoElem, unitElem).on("focusin",function(e) {
    console.log("focusin");
  });

It works only on kojiNameElem. The other elements don't.

I know it works with one single element in the JQuery selector as below.

$(kojiNameElem).on("focusin",function(e) {
        console.log("focusin");
      });

Could you help me please?

Does this answer your question? [jQuery OR Selector?](https://stackoverflow.com/questions/2263975/jquery-or-selector) — Nick, May 24 '20 at 06:55
@Nick the result is the same as my expectation but it is not answer exactly to my question. we don't have the way to put multiple actual elements directly in the JQuery selector as single actual element can be put in JQuery selector? — Herbert, May 24 '20 at 07:50
@Nick that's not the same question as that uses a string selector, but OP here wants to use objects and already demonstrates knowledge of `,` in strings — freedomn-m, May 24 '20 at 09:09
@freedomn-m the second answer to that question says specifically "Using a comma may not be sufficient if you have multiple jQuery **objects** that need to be joined." — Nick, May 24 '20 at 22:38

mr. pc_coder · Answer 1 · 2020-05-24T08:15:23.463

You can do it like

var koji_id=1;
  var kojiNameElem = $("#koji_"+koji_id).find(".kojiName");
  var tankaElem = $("#koji_"+koji_id).find(".tanka");
  var suryoElem = $("#koji_"+koji_id).find(".suryo");
  var unitElem = $("#koji_"+koji_id).find(".unit");

  $("#koji_"+koji_id).on("click", '.kojiName,.tanka,.suryo,.unit',function(e) {
    console.log($(this).text());
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="koji_1">
  <span class="kojiName">kojiName</span>
  <span class="tanka">tanka</span>
  <span class="suryo">suryo</span>
  <span class="unit">unit</span>
</div>

You can also use add method

  var koji_id=1
  var koji= $("#koji_"+koji_id);
  var kojiNameElem = koji.find(".kojiName");
  var tankaElem = koji.find(".tanka");
  var suryoElem = koji.find(".suryo");
  var unitElem = koji.find(".unit");
  
  $(kojiNameElem).add(tankaElem).add(suryoElem).add(unitElem).on("click",function(e) {
    console.log($(this).text());
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="koji_1">
  <span class="kojiName">kojiName</span>
  <span class="tanka">tanka</span>
  <span class="suryo">suryo</span>
  <span class="unit">unit</span>
</div>

thanks. It works. But we don't have the way to put multiple actual elements directly in the JQuery selector as single actual element can be put in JQuery selector? — Herbert, May 24 '20 at 07:48
Can you say what is your input? Is it array includes of class or something else ? — mr. pc_coder, May 24 '20 at 07:55
Yes, add method fulfills my expectation. Thank you for your help! @pc_coder — Herbert, May 24 '20 at 12:25

score 0 · Accepted Answer · answered May 24 '20 at 09:12

0

There's no way to combine multiple jquery objects in a single selector - the method to do this is .add()

Demonstration:

var a = $("#a");
var b = $("#b");
var c = $("#c");

var arr = a.add(b).add(c).map((i, e)=>$(e).text()).toArray();
console.log(arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

answered May 24 '20 at 09:12

freedomn-m

27,664
8
35
57

Yes, that is what I wanted to know. "There's no way to combine multiple jquery objects in a single selector". and we can use add method instead. This answer is more straightforward to my OP so checked this as the accepted answer. thak you! – Herbert May 24 '20 at 12:23

how to add multiple "actual" element objects in JQuery selector

2 Answers2