Is it possible to differentiate selectors with only $ (this)?

3

I have this piece of code:

$('#btn_1, #btn_2').on('click', function() {    

  // Button 1
  let btn1conSpan = $('#btn_1 span');
  
  // Button 2
  let btn2conSpan = $('#btn_2 span');
  
  console.log(btn1conSpan.text());
  console.log(btn2conSpan.text());  
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

Which works correctly, now my question, is when I want to use the $(this) selector:

Is it possible in some way to know which of the id 's has been pressed ( without using conditions ( if ( .. ) ))? In such a way that it shows the result as the first example?

The second example shows the idea I have, but obviously does not give the desired result:

$('#btn_1, #btn_2').on('click', function(){
  
  let $this       = $(this);

  // Button 1
  let btn1conSpan = $this.find('span'); // Que sea el selector #btn_1
  
  // Button 2
  let btn2conSpan = $this.find('span'); // Que sea el selector #btn_2
  
  console.log(btn1conSpan.text()); // Resultado deseado: Span1
  console.log(btn2conSpan.text()); // Resultado deseado: Span2 
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>

The desired result of example 2 is:

Span1
Span2

EDIT :

I see that it is somewhat confusing to understand the question.

Simplify as much as possible:

$('#btn_1, #btn_2').on('click', function() {    

  // Quiero seleccionar con $(this) de esta forma

  $(this).elemento1; // Que sea #btn_1
  $(this).elemento2; // Que sea #btn_2
});

Is there a way to make it that simple?

    
asked by aldanux 17.02.2017 в 23:16
source

5 answers

4

In theory, only with $(this) could not be done. this is the element that is the object of the action, but it does not save any type of information about the other elements in the selector, so from btn_1 you could not know if btn_2 is part of the selector to click in it (and vice versa).

That's why I was asking if that was your structure, because the closest thing would be to select the sibling elements and force a click on them too ... although that is also a bit complicated (not too much).

In old versions of jQuery it was selector that returned the selector used, but it was considered obsolete from the version 1.7 and was removed in 1.9 (apart from that it seems that it was not very effective).

Another option, although I would personally consider it a cheat, is to pass the selector as a parameter to the click event handler and from there use it to do what you want (something similar to what you put in the comments and to the Jorius method ). Using on you can optionally pass data:

.on( events [, selector ] [, data ], handler )

that will be read in dataset . Yes technically it's not this , that's why I say it's "cheat", but it works and you just have to write the selector in a site:

var miSelector = '#btn_1, #btn_2';

$(miSelector).on('click', { selector: miSelector }, function(e){
  
  $(e.data.selector).each(function() {
    console.log($(this).find("span").text() );
  });
  
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>
    
answered by 18.02.2017 / 01:23
source
3

I do not think that selectors can be differentiated using the object $(this) (I did not find anything in the official documentation and looking for a while on the internet) but you can assign each of the objects to a variable in the following way:

We create a function called trigger passing it as argument our selector and it is triggered when any of our elements is clicked , there in the function we do a .each to these elements and we put the respective objects to the object buttons and then we show their respective text as independent variables

var buttons = {};

function trigger(selector){
  $(selector).each(function(i, e){
    let c = i+1;
    buttons['btn'+c+'conSpan'] = $('#' + e.id + ' span');
  });
}

$('#btn_1, #btn_2').on('click', function() {
  trigger('#btn_1, #btn_2');
  console.log(buttons.btn1conSpan.text());
  console.log(buttons.btn2conSpan.text());
});
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>
    
answered by 17.02.2017 в 23:28
2

In addition to the response from @AlvaroMontoro , the code could be simplified more and with the benefit of using event delegation

So for example:

$(document).on('click', '#btn_1, #btn_2', function(evt){
  $(evt.handleObj.selector).each(function() {
    console.log($(this).find('span').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>
    
answered by 24.03.2017 в 22:13
1

I hope it's useful.

<ul id="equipos">
     <li id="1"><a href="#">1</a></li>
     <li id="2"><a href="#">2</a></li>
     <li id="3"><a href="#">3</a></li>
     <li id="4"><a href="#">4</a></li>
</ul> 

$('#equipos').click(function(e){
     var id = e.target.id;
     alert(id);
}); 
    
answered by 17.02.2017 в 23:24
0

I hope it is what you are looking for.

$('#btn_1, #btn_2').on('click', function(e) {    
  let val = $(this).find('span').text();
  let id = $(this).attr('id');
  	  console.log(val);
  	  console.log(id);
});
<button id="btn_1"><span>Span1</span> Button 1</button>
<button id="btn_2"><span>Span2</span> Button 2</button>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    
answered by 18.02.2017 в 00:27