StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is actually working fine, but <code>after()</code> will only be executed, when the very next <code>li</code> is 4n+4 child. I.e. right from the start, it will work fine if you click on 3 <em>or</em> on 7. Right after you clicked on 3, the 7th one will stop working and 6th one will work instead, because 7 has now become 8th element.</p> <p>A bit clumsy update: <a href="http://jsfiddle.net/hYE7e/3/" rel="nofollow">http://jsfiddle.net/hYE7e/3/</a></p> <pre><code>$("ul li:nth-child(4n)").addClass("last-in-line"); $("li").click(function () { $(this).nextAll("li.last-in-line").andSelf(".last-in-line").filter(":first").after('<li class="full">new full width item</li>'); }); </code></pre> <p><code>andSelf(".last-in-line").filter(":first")</code> to ensure that clicking on 4th, 8th, etc elements will work.</p> <p><strong>Update:</strong></p> <p>After discussion in comments, I think I have it: <a href="http://jsfiddle.net/hYE7e/7/" rel="nofollow">http://jsfiddle.net/hYE7e/7/</a></p> <p>With custom filter:</p> <pre><code>$("li").click(function () { var myIndex = $("li:not(.full)").index($(this)); // Save our position in a row $(this) .nextAll("li:not(.full)") .andSelf() .filter(function(index){ // Get 4n'th lis from 'not(.full)' set return (index + myIndex + 1) % 4 == 0; }) .add("li:last") // Make sure last rows will work .first() // Only add 'li' after first matching element .after('<li class="full">new full width item</li>'); }); </code></pre>

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