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 selector $(this)
:
Is it possible to somehow 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 doesn't 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.
I 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 do it that simple?
In theory, it just
$(this)
couldn't be done.this
is the element object of the action, but it does not save any type of information about the other elements that are in the selector, so it wouldbtn_1
not be possible to know if itbtn_2
is part of the selector to click on 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 excessively).
In older versions of jQuery it was supposed
selector
to return the used selector, but it was deprecated as of version 1.7 and was removed in 1.9 (apart from the fact that it didn't seem to be very efficient).Another option, although I would personally consider cheating a bit, 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 I put in the comments and to the Jorius method ). Using
on
you can optionally pass data:that will be read in the
dataset
. Yeah technically it's notthis
, that's why I say it's "cheating", but it works and you just have to write the selector somewhere:I don't think that the selectors can be differentiatedby the object
$(this)
(I didn't find anything in the official documentation and searching the internet for a while) but you can assign each of the objects to a variable in the following way:We create a function called passing our selector
trigger
as an argument and that is triggered when any of our elements is clicked , there in the function we make a to said elements and push the respective objects to the object and then we show their respective ones as independent variables.each
buttons
text
I hope it is useful.
I hope it is what you are looking for.
In addition to @AlvaroMontoro's answer , the code could be further simplified and with the benefit of using
event delegation
For example: