Get all the ID of the elected in jQuery

Asked

Viewed 431 times

3

Well I remove CSS from a certain element like this:

$('#menu' + this.id + '').removeClass('open');

What I need to do and remove from all elements #menu less that of the informed.

I tried to do so:

!$('#menu' + this.id + '').removeClass('open');

But it didn’t work.

I have several #menu as #menu1,#menu2. Since they do not repeat themselves in html. I need to remove CSS from everyone but the #menu informed.

Someone knows how to do it?

javascript jquery

  • Can you show more of the code/functionality you want to do? So we adapt our answers more to your reality.

  • @Sergio ok, to make it easier I posted all the code. Well right click on <tr> from the table that will open a menu, I need to make it close when I click the bottom line. https://jsfiddle.net/zj2sbpny/

  • Is that the way you want it? https://jsfiddle.net/d733a9ox/

  • +/-, how re removed thesetTimeout the effect gets sucked, give a look when the table gets bigger https://jsfiddle.net/d733a9ox/1/. You have to have the setTimeout to wait for the effect to end and then remove the position of the div.

2 answers

3

You can use the not:

$('div[id^=menu').click(function() {
  // indica qual item não deve ser removido
  $('div[id^=menu').not($(this)).removeClass('open');
  visualizar();
});

// apenas visualizacao
function visualizar() {
  $('div[id^=menu').each(function() {
    console.log($(this).attr('id'), $(this).attr('class'));
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1" class="open">1</div>
<div id="menu2" class="open">2</div>
<div id="menu3" class="open">3</div>

  • The way it worked was good, but I can not use, because I pass the div that can not be changed in $(this). I need to remove all but the one in $(this).

  • I changed the form @Hugoborges, see if this is it by clicking on some number to see the result.

  • This giving this error in the console. Error: Syntax error, unrecognized expression: div[id^=menu

  • Here in the example or in your project @Hugoborges?

  • In his example.

  • I am testing on firefox and Chrome and is running normal :x

  • True, the error happens in Safari.

Show 2 more comments

1

You can use the .toggleClass(classe, condição) passing you the ID check to know whether to add or remove the class.

Example:

var idEspecial = 'menu1';
$('div[id^=menu').each(function() {
  $(this).toggleClass('open', this.id === idEspecial);
});
div {
  color: black;
}

.open {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1" class="open">1</div>
<div id="menu2" class="open">2</div>
<div id="menu3" class="open">3</div>

  • Good in your way won’t work with me, because I do a lot of things not just remove the class. I need some way to do this on all div #menu, except the one I reported on.

  • 1

    @Hugoborges is what my code does. Remove all and add to that given ID. If you show more of what you’re doing there may be another way, but for the code/problem you showed my answer it serves.

Browser other questions tagged javascript jquery

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