CODEWITHSUNDEEP
javascriptjquery
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

How to I only show the divs if that div has an input that isn't blank?

I have a bunch of divs that are all hidden like this

<div class="elements">
    <input value="something" type="text" value="" name="name">
    <input value="" type="text" name="phone">

</div>

<div class="elements">
    <input type="text" value="" name="name" class="contact_name">
    <input value="something" type="text" name="phone">

</div>

<div class="elements">
    <input type="text" value="" name="name" class="contact_name">
    <input value="" type="text" name="phone">

</div>

<div class="elements">
    <input value="something_again" type="text" value="" name="name">
    <input value="" type="text" name="phone">
</div>

CSS

.elements{display:none;}

I want to show only the element divs that have an input of that is not an empty string....so in the above example i would show the first, second and fourth divs because at least one input has a value...

$('.elements').find('input').each(function)...

that is what i have so far but not sure how to search if there is at least one input that isn't blank

Upvotes: 1

Views: 292

Answers (2)

Marknl
Marknl

Reputation: 182

Try this 

$('.elements input:text[value!=""]').parents(".elements").show();

Upvotes: 2

Samuel Liew
Samuel Liew

Reputation: 79032

$('.elements').each(function() {

    var count = $(this).find('input[value!=""]').length;
    count > 0 ? $(this).show() : $(this).hide();

});

Upvotes: 1

Related Questions