Iterating through dom elements in a class relatively

Question

I'm making a quiz using jquery and would like to be able to change the color of all the button elements in a question class relatively. Many examples I've seen show how to do it in an absolute manner--meaning all the elements of all instances of a class change color. How do you iterate through a single instance of div class?

function clickFn() {
  console.log('in click event')
  $( "button" ).each(function() {
    if ($(this)
        $(this).toggleClass( "buttonSelected" );
  });
};

.button {
  background-color: grey;
  border: none;
  color: white;
  width: 20vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.buttonSelected {
  background-color: #f00;
  border: none;
  color: white;
  width: 20vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='question'>
  <span class='question_body' onclick="clickFn()">Question n </span></p>
<button class="button" onclick="clickFn()">Wrong Answer</button></p>
<button class="button" onclick="clickFn()">Correct Answer</button></p>
<button class="button" onclick="clickFn()">Wrong Answer</button></p>
<button class="button" onclick="clickFn()">Wrong Answer</button></p>
</div>
<div id='question'>
  <span class='question_body'>Question n </span></p>
<button class="button">Wrong Answer</button></p>
<button class="button">Correct Answer</button></p>
<button class="button">Wrong Answer</button></p>
<button class="button">Wrong Answer</button></p>
</div>

This will change the color

Is your goal to only select all the buttons inside each div separately, so you are not applying style to all of them ? — Yasin Yaqoobi, Jun 18 '16 at 20:24
Yes, I want all buttons in a div instance to be grayed out when you select an answer, but not all buttons globally. — Null Salad, Jun 18 '16 at 20:27

score 2 · Accepted Answer · edited May 23 '17 at 12:22

You have a syntax error in if($(this) (missing brace)
Don't use the same id attributes for multiple elements. It's an identifier and as such should be unique.
No need for loops. Simply use .parent() or .closest('div')
(Side note) It's not a good practice to use javascript attributes

Is this what you want?

$(".button").click(function(){
   $(this).parent().find('.button').toggleClass("buttonSelected")
   .end().find('.good').toggleClass("buttonGood");
});

// Or .closest():
// $(".button").click(function() {
//    $(this).closest('div').find('.button').toggleClass("buttonSelected")
//    .end().find('.good').toggleClass("buttonGood");
// });

.button {
    background-color: grey;
    border: none;
    color: white;
    width: 20vw;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.buttonSelected {
    background-color: #f00;
}
.buttonGood {
    background-color: #66ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='question1'>
     <span class='question_body'>Question n </span></p>
     <button class="button">Wrong Answer</button></p>
     <button class="button good">Correct Answer</button></p>
     <button class="button">Wrong Answer</button></p>
     <button class="button">Wrong Answer</button></p>
    </div>
    <div id='question2'>
     <span class='question_body'>Question n </span></p>
     <button class="button">Wrong Answer</button></p>
     <button class="button good">Correct Answer</button></p>
     <button class="button">Wrong Answer</button></p>
     <button class="button">Wrong Answer</button></p>
    </div>

Yasin Yaqoobi · Answer 2 · 2016-06-18T20:45:46.933

<div id="container">
<div class="questions">
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
</div>

<div class="questions">
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
</div>
</div>




<script type="text/javascript">
$('#container button').each(function(){
    $(this).on('click', function(){
        var allButtons = $(this).parent().find('button'); 
        console.log(allButtons);
         $(allButtons).each(function(){
        $(this).toggleClass( "buttonSelected" );
      });
  });
});
</script>

Zakaria Acharki · Answer 3 · 2016-06-18T20:59:06.407

Firstly the id attribute should be unique in the same document so better to replace the ids question by a class :

<div class='question'>

Then it will be better if you avoid the inline-events lile onClick() and remove the extra </p> in the end of every button, so your code will be correct and more readable :

<div class='question'>
    <span class='question_body'>Question n </span>
    <button class="button">Wrong Answer</button>
    <button class="button">Correct Answer</button>
    <button class="button">Wrong Answer</button>
    <button class="button">Wrong Answer</button>
</div>
<div class='question'>
    <span class='question_body'>Question n </span>
    <button class="button">Wrong Answer</button>
    <button class="button">Correct Answer</button>
    <button class="button">Wrong Answer</button>
    <button class="button">Wrong Answer</button>
</div>

Instead create a click event in your javascript code and use siblings method in place of parent() and each() to change the class of button in same level of clicked one :

$('body').on('click', 'button', function(){
    if( $(this).hasClass('clicked') ){
        $(this).removeClass('clicked');
        $(this).siblings('button').removeClass('buttonSelected clicked');
    }else{
        $(this).removeClass('buttonSelected').addClass('clicked');
        $(this).siblings('button').removeClass('clicked').addClass('buttonSelected');
    }
});

Hope this helps.

Working Snippet

$('body').on('click', 'button', function(){
  if( $(this).hasClass('clicked') )
  {
    $(this).removeClass('clicked');
    $(this).siblings('button').removeClass('buttonSelected clicked');
  }else{
    $(this).removeClass('buttonSelected').addClass('clicked');
    $(this).siblings('button').removeClass('clicked').addClass('buttonSelected');
  }
});

.button {
  background-color: grey;
  border: none;
  color: white;
  width: 20vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.buttonSelected {
  background-color: #f00;
  border: none;
  color: white;
  width: 20vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='question'>
  <span class='question_body'>Question n </span>
  <button class="button">Wrong Answer</button>
  <button class="button">Correct Answer</button>
  <button class="button">Wrong Answer</button>
  <button class="button">Wrong Answer</button>
</div>
<div id='question'>
  <span class='question_body'>Question n </span>
  <button class="button">Wrong Answer</button>
  <button class="button">Correct Answer</button>
  <button class="button">Wrong Answer</button>
  <button class="button">Wrong Answer</button>
</div>

Iterating through dom elements in a class relatively

3 Answers3

Working Snippet