StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You're thinking in markup, but the DOM isn't markup, it's <em>objects</em>.</p> <p>If you want to insert a new <code>div</code> after the row the user is on, you're really close, just only specify what you want to add:</p> <pre><code>$('.portfolio_item').click(function(){ var row = $(this).parent().parent(); row.after('<div class="detailview">Detail Information</div>'); }); </code></pre> <p><a href="http://jsbin.com/IxoXadE/1" rel="nofollow">Live Example</a> | <a href="http://jsbin.com/IxoXadE/1/edit" rel="nofollow">Source</a></p> <p>I find it odd, though, that you want the details to be so far away from the item that was actually clicked (I assume it makes sense in the general context of your markup and styling).</p> <p>Separately, I recommend using <code>closest(".row")</code> rather than <code>parent().parent()</code>.</p> <hr> <p>In the comments you've said you want to actually split the container. You can do that, but to do it you have to create a new container, move the rows following the row in question into it, and then append it. Here's how:</p> <pre><code>$('.portfolio_item').click(function(){ var row = $(this).closest(".row"); var followingRows = row.nextAll(); var container = row.closest(".container"); var newContainer = $('<div class="container"></div>'); newContainer.insertAfter(container); $('<div class="detailview">Detail Information</div>').insertAfter(container); newContainer.append(followingRows); }); </code></pre> <p><a href="http://jsbin.com/IxoXadE/2" rel="nofollow">Live Example</a> | <a href="http://jsbin.com/IxoXadE/2/edit" rel="nofollow">Source</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload