CODEWITHSUNDEEP
jquery
german gittar
german gittar

Reputation: 23

jquery - show div when another has a certain class

in a list, I have the divs with class rtin-thumb with display none, I want that when inside rtin-content there is a span badge.rtcl-badge-_top, the rtin-thumb is shown as display block

<div class="listing-list-each listing-list-each-1 rtcl-listing-item">
   <div class="rtin-item">
      <div class="rtin-thumb" style="display:none"></div>
      <div class="rtin-content">
         <div class="rtcl-listing-badge-wrap"><span class="badge rtcl-badge-_top">Top</span></div>        
      </div>
   </div>
</div>
<div class="listing-list-each listing-list-each-1 rtcl-listing-item">
   <div class="rtin-item">
      <div class="rtin-thumb" style="display:none"></div>
      <div class="rtin-content">
         <div class="rtcl-listing-badge-wrap"></div>        
      </div>
   </div>
</div>

Upvotes: 0

Views: 36

Answers (1)

J&#252;rgen Fink
J&#252;rgen Fink

Reputation: 3535

Converting comment from @showdev into a functional snippet.

Make sure not to assign display:none within inline-style, but preferably within <style> tag at beginning.

<style>
.rtin-thumb {
  display:none;
  width: 50px;
  height: 50px;
  background: blue;
}
</style>

Try and Run code snippet:

$(function() { // triggers when jQuery is loaded

  $(".rtin-item").each(function() { // loop
  
    $(".badge.rtcl-badge-_top")
      .parents(".rtin-item")
      .children(".rtin-thumb")
      .css("display", "block")
      
  });
  
});
div {
  min-height: 50px;
  padding: 0.5em;
  background: #eee;
}
.rtin-content {
  min-height: 50px;
  background: #999;
}

.rtin-thumb {
  display:none;
  width: 50px;
  height: 50px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="listing-list-each listing-list-each-1 rtcl-listing-item">
     <div class="rtin-item">
        <div class="rtin-thumb"></div>
        <div class="rtin-content">
           <div class="rtcl-listing-badge-wrap">
             <span class="badge rtcl-badge-_top">Top</span>
           </div>
        </div>
     </div>
  </div>
  <div class="listing-list-each listing-list-each-1 rtcl-listing-item">
     <div class="rtin-item">
        <div class="rtin-thumb"></div>
        <div class="rtin-content">
           <div class="rtcl-listing-badge-wrap">
           </div>
        </div>
     </div>
  </div>

Upvotes: 1

Related Questions