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">&nbsp;<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">         &nbsp;<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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -