JQuery affect only "this" element of same class

jquery find
jquery each
jquery selector
jquery first
jquery parent
jquery closest
jquery append
jquery css

I have a bunch of html elements with same class and a JQuery click function when i click on one of these elements, all of the same class are affected by this function.

My question: how can I modify the following code in order to affect only clicked element and not all of the same class.

jquery

$('.editorTile').click(function(event){
      $(this).data('type', selectedTile);
      $(this).data('imgx', selectedTile_imgX);
      $(this).data('imgy', selectedTile_imgY);          
});

html

<div class="level">
    <div class="a editorTile" ...>
    <div class="a editorTile" ...> // affect only this
    <div class="a editorTile" ...>
    <div class="a editorTile" ...> // or this...
</div>

It already would work the way you have it but it won't be obvious. In this Demo click each line.

this points to the owner of the function which is in this case the specific element that happens to be clicked. A more technical term for an element that gets clicked hovered upon, etc. is said to be the "origin of the event". You can also use the event.target property which (like this but much less confusing) points to the "origin of events". The second example in the Demo shows the use of event.target.

Demo

$('.a').click(function(event){
  $(this).css('background', 'red');
});

$('.b').on('click', function(e) {
  $(e.target).css('font-size','36px');
});
  
<div class="levelA">
    <div class="a">this</div>
    <div class="a">is a</div>
    <div class="a">keyword</div>
    <div class="a">it works!</div>
</div>


<div class="levelB">
    <div class="b">event.target</div>
    <div class="b">is a</div>
    <div class="b">property</div>
    <div class="b">of the Event Object</div>
</div>




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

.one(), alert( "This will be displayed only once." ); }); In other words, explicitly calling .​off() from within a regularly-bound handler has exactly the same effect. If the first  You can use nextAll() and match only first one: $(this).nextAll('.toload').first().load(a); Or if there is no other (not like in your specific case) .toLoad sibling of specific clicked .select01, then use: $(this).siblings('.toload').load(a);

Here is simple and easy solution:

<div class="level">
   <div class="a editorTile">h</div>
   <div class="a editorTile">g</div>
   <div class="a editorTile">g</div>
   <div class="a editorTile">g</div>
</div>

 $('.editorTile').each(function(){
    $(this).click(function(){
     $(this).text("I am clicked");
   });
 });

or you want something else so you can ask.

.not(), When a specific node or array of nodes are provided, text or comment nodes will only be removed from the jQuery object if they match one of the nodes in the  Removes the next function from the queue, and then executes the function. Fades in the selected elements. Fades out the selected elements. Fades in/out the selected elements to a given opacity. Toggles between the fadeIn () and fadeOut () methods. Stops, removes and completes all queued animations for the selected elements.

You will have to generate dynamic class or id to get that particular div as selector.

The other way of solving this would be to use :eq(n) along with selector if you know which div you have to invoke the click.

For example in your case :-

<div class="level">
<div class="a editorTile" ...>
<div class="a editorTile" ...> // affect only this
<div class="a editorTile" ...>
<div class="a editorTile" ...> // or this...

$("div.editorTile:eq(2)") && $("div.editorTile(4)") gives you second and fourth element.

For that you have to already know the exact div order

.first(), Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first element in that set. Consider a page​  jQuery - Effects jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects. Showing and Hiding Elements

.contents(), This property was removed in jQuery 1.9 and is available only through the properties and methods can be modified without affecting the original jQuery object. When jQuery hides an element, it sets its CSS display property to none. This means the content will have zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page. jQuery can also show or hide content by means of animation effects.

.siblings(), If we had supplied one, only the matching items among these four would be included. The original element is not included among the siblings, which is important  With jQuery you can fade elements in and out of visibility. Because time is valuable, we deliver quick and easy learning. At W3Schools, you can study everything you need to learn, in an accessible and handy format. Demonstrates the jQuery fadeIn () method. Demonstrates the jQuery fadeOut () method. Demonstrates the jQuery fadeToggle () method.

jQuery siblings() Method, Tip: Use the prev() or next() method to narrow down the search for only previous or next sibling elements. Syntax. $(selector).siblings(filter). Parameter, Description. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Comments
  • $(this) -> $(event.target)
  • With this, only currently clicked element should change.
  • your code giving you any error ? looks ok to me
  • I added console.log() and when i click one of the elements the same message is repeated several times.
  • Of course the click is for all. But this only means the one element. Check this.
  • and this should be a comment
  • @Mamun it isn't. that is the mystery here. I don't know why OPs code isn't working too
  • Well, i just did the same and it only affected clicked element, but why would console.log() be repeated for all elements?
  • Wasn't finished answering question.
  • jQuery does know the exact element without all these specific selectors.