How can I hide child div based on the attribute value of parent div. I have following markup:
<div class="offerContainer">
<div class="Offers" producttype="CIP">
<div class="buttons_wrap"></div>
</div>
<div class="Offers" producttype="P">
<div class="buttons_wrap"></div>
</div>
<div class="Offers" producttype="CIP">
<div class="buttons_wrap"></div>
</div>
</div>
And I want to hide buttons_wrap only when atrribute value of producttype is "CIP".
Something like:
if($(obj).parents(".offersContainer").find('.Offers').attr('producttype').value == "CIP")
$('.buttons_wrap').hide();
$('.buttons_wrap').each(function(){
if($(this).parents('.Offers').attr('producttype') == "CIP"){
$(this).hide();
}
});
JSFIDDLE Example:
$(function() {
var $offers = $('.Offers');
$offers.each(function() {
var productType = $(this).attr('producttype');
if(productType != "CIP")
{
$(this).children().hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="offerContainer">
<div class="Offers" producttype="CIP">
<div class="buttons_wrap"><button>First</button></div>
</div>
<div class="Offers" producttype="P">
<div class="buttons_wrap"><button>Second</button></div>
</div>
<div class="Offers" producttype="CIP">
<div class="buttons_wrap"><button>Third</button></div>
</div>
</div>