How to select a special div in jQuery

Question

my HTML code looks like this. (I have a special design of radio input)

<div class="area" id="area-1">
 <div class="input">
  <input type="radio" class="active-radio">
  <input type="radio" class="no-active-radio>
  <input type="radio" class="no-active-radio>
 </div>
</div>
<div class="area" id="area-2">
 <div class="input">
  <input type="radio" class="no-active-radio>
  <input type="radio" class="active-radio">
  <input type="radio" class="no-active-radio>
 </div>
</div>

When I click on a radio in "#area-1", I want to remove the class "active-radio" on the others radio in "area-1" but not in "area-2".

There are a lot of div .area so I don't want to specify each time the div id in my script.

JS:

var thisArea = this.closest(".area");
$(thisArea + " .input input[type='radio']").parent().removeClass('active-radio').addClass('no-active-radio');
$(this).addClass('active-radio').removeClass('no-active-radio');

Basically I want to select all the .input which contain a radio input in the same .area as the clicked radio.

I think the problem come from this part :

thisArea + " .input input[type='radio']"

Answer 1

You can't concatenate a jQuery object and a string. Use .find() to find the elements that match the selector. Also, the active-radio class isn't on the parents of the radio buttons, it's on the radio buttons themselves, so don't use .parent() .

thisArea.find(".input :radio").removeClass('active-radio').addClass('no-active-radio');

Answer 2

try like this:

$(thisArea)
  .find(".input input[type='radio']")
  .parent()
  .removeClass('active-radio')
  .addClass('no-active-radio');

Answer 3

Limit your search context to the clicked element.

 Array .from(document.querySelectorAll('.area')) .forEach( a => a.addEventListener('click', clickFun, false) ); function clickFun(e) { Array .from(e.target.querySelectorAll('[type=radio]')) .forEach( a => { a.classList.toggle('no-active-radio'); a.classList.toggle('active-radio'); }) }; 

 .area { display:block; background-color:#a0a0a0; padding:20px; margin:20px; } input[type=radio].active-radio { zoom:2; } 

 <div class="area" id="area-1"> <div class="input"> <input type="radio" class="active-radio"> <input type="radio" class="no-active-radio"> <input type="radio" class="no-active-radio"> </div> </div> <div class="area" id="area-2"> <div class="input"> <input type="radio" class="no-active-radio"> <input type="radio" class="active-radio"> <input type="radio" class="no-active-radio"> </div> </div> 

Answer 4

thisArea.find('input[type="radio"]').removeClass('active-radio');
$(this).addClass('active-radio');

*Unless you are having different css styles on radio inputs and different styles on radio inputs with a no-active class then there is no point in having the no-active class. Just add and remove the active class and add the styles of the no-active class directly to the input[type="radio'] in the css.