javascript - Why is this div completely invisible to jQuery? -
i have div (the topmost 1 in markup below) in html code i'm trying find via jquery .children()
. reason jquery can't find it.
this can tested running this:
$($('<p class="info-item"><span class="info-item-key">gender:</span><span class="info-item-value">male</span><span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()
here same markup contained in code, better formatted:
<p class="info-item"> <span class="info-item-key">gender:</span> <span class="info-item-value">male</span> <span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a> </span> <div class="form-inline info-item-edit-input"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" value="" /> <div class="input-group-addon"> <a class="black-link info-item-edit-save-link"> <i class="fa fa-check"></i> </a> </div> </div> </div> </div> </p>
for context, i'm trying use jquery show edit form when edit button clicked.
is there reason why div seems invisible jquery? .contents()
can't find either. (try it.)
if helps, div hidden display: none
in css, trying in js console session attached document doesn't have css results in div not being found either. (try in stackoverflow js console, or other site, if want.)
that's because markup invalid. div
can't child of p
element. p
element can have phrasing content.
consider simple example:
$('<p><div></div></p>');
this how chromium browser renders above markup:
<p></p><div></div><p></p>
Comments
Post a Comment