CODEWITHSUNDEEP
jquery
Sadikhasan
Sadikhasan

Reputation: 18601

How to find hidden div using jQuery

HTML

<div class="form-group">
    <div style="vertical-align:top;" class="ajax-upload-dragdrop">
    <span style="color: #B2B2B2;font-size: 18px; opacity: 1; margin-right:249px;" id="cv_founder">
    Upload Your CV
   </span>
        <div class="ajax-file-upload" style="position: relative; overflow: hidden; cursor: default;">Browse File
        </div>
    </div>
    <div class="form-control" id="founder_cv_file" style="display: none;">Browse File</div>
    <input type="hidden" id="founder_cv" name="data[Founder][0][cv]"> <em>*</em>
</div>

jQuery

alert($(".ajax-upload-dragdrop").parent().find("div:hidden").attr("id"));  //Not work
alert($(".ajax-upload-dragdrop").parent().find("input[type=hidden]").attr("id"));  //Work fine

How to find hidden div in given code. I successfully find hidden input but do not find hidden div. Please Help me.

Upvotes: 0

Views: 4095

Answers (1)

Derek
Derek

Reputation: 4751

When you use .parent().find(), it traverses up to .form-group and then finds all div:hidden elements. If your div .ajax-upload-dragbox is visually hidden, it would return that as the first element in the set. Since it has no ID, then it would return undefined for that value. You want to use the .siblings() method. This way you don't need to do any extra traversing, and it won't include the .ajax-upload-dragdrop element with no ID:

Updated Fiddle

alert($(".ajax-upload-dragdrop").siblings("div:hidden").attr("id"));

The same will work for your input element, as the :hidden in this case refers to the type property:

alert($(".ajax-upload-dragdrop").siblings('input:hidden').attr("id"));

is shorthand for

alert($(".ajax-upload-dragdrop").siblings('input[type="hidden"]').attr("id"));

Upvotes: 1

Related Questions