How to select only one div of several equals with js?

Asked

Viewed 1,281 times

2

I’m creating a system of posts made with Divs, but as all Divs will have the same class nomenclature I need when I click on some javascript attack only itself without interfering with others. Only with js, I don’t use jquery!

Example, if I click open the post menu, I want only this menu to open without opening that of the other posts.

  • Don’t you have any code to add? Do you want to do this only with js? It can be with jquery?

  • @Localhost Unfortunately not, because I still don’t know how to create, tomorrow I put the HTML code because now I’m by cell phone!

2 answers

2

With jquery the click method takes all the elements with a certain class, after that you send the clicked by parameter and take with this...

$('.ctn').click(function(e){
	alert($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ctn">
  div 1  
</div>
<div class="ctn">
  div 2
</div>
<div class="ctn">
  div 3 
</div>
<div class="ctn">
  div 4
</div>

  • So just use this'?

1

With pure Javascript:

var elementoAtual = document.getElementsByClassName("minha-classe");

Array.prototype.slice.call(elementoAtual).forEach(function(pegaElementoAtual){
    pegaElementoAtual.addEventListener('click', function(e){
       alert(this.innerHTML);
    });
});
body{
    font-family: 'calibri light', sans-serif;  
}
div{
    padding: 5px;
}
div.minha-classe{
    text-align: justify;
    text-indent: 25pt;
}
<div class="minha-classe">
    Adult education is essential for Democracy of India. The number of grown up illiterates is great. All college and senior School students should come forward to visit villages in the summer vacation. Each one will teach one there. This will remove illiteracy and strengthen our democracy.
</div>
<div class="minha-classe">
    I happened to see a one day cricket match between Pakistan and Australia at Wankhade Stadium, Mumbai. I went for a fun. But I witnessed a horrible sight. Two thousand ticketless cricket fans gate crashed. There was a stampede. Three persons died and twenty were injured. Administration was responsible for it.
</div>
<div class="minha-classe">
    City Anti-pollution Drive demands certain steps from all the citizens of ABC city. All house-holders should pack the waste in a plastic bag and put the bag in front of their house. The bag will be replaced with an empty bag by the Municipal van every morning. They should maintain the cleanliness of the city. This will make the city pollution free.
</div>

You have not posted any code, but this can be easily elaborated with the following (with Jquery):

$('div.minha_classe').on('click', function(){
   var elementoAtual = $(this);
   // Faça o que quiser a partir daqui
});
  • So just use this' ?

  • Basically! The $(this) refers to the current context element. This in Jquery. In pure Javascript just use the word this

  • Thanks! You can select a sister element from this'?

  • Yes. Yes there is! How do you plan it?

  • My question was confused, but in my project, when clicking a button will open a menu inside the div, but there will be several Ivs with the same classes and cannot open the other Ivs!

  • Look at that! Instead of just displaying the text you can easily do any other action with the HTML element or any other DOM element. Try and draw up your own code, any questions, please post again with a sample of what you tried. As is well known, this community is for questions and not to do someone else’s homework.

  • 1

    document.getElementsByClassName returns an array of DOM items, it will not work if you do so elementoAtual.addEventListener('click', it would be right to use a for. ;D

  • Ready, @Guilhermenascimento. Updating according to your suggestion.

  • @Nottherealhemingway Stacksnippet or snippet of code works very similar to Jsfiddle, in which case you should use snippet of code, it just won’t be useful for things like PHP or a Javascript that doesn’t do anything, or if you’re just using it for text tagging. I edited your answer and removed what was not important, I believe it is not necessary to write things like "Edited", because if you notice at the bottom of the answer it shows the last time the answer was edited, I also recommend that you focus on leaves what is useful in the body of the answer, what was wrong...

  • 1

    ...previously prefer to remove, so leaves cleaner and clear the intention for those who question ;), I hope I have been able to help you as to a better use of the site.

  • 1

    Yes, @Guilhermenascimento! Thank you very much.

Show 6 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.