Databases
StackOverflow2013
Postsdbo
POsome identical classes, act in each
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POsome identical classes, act in each
    text
    copied!<p>I have a section where you see one or more messages that the user must agree, you should only leave one, if accepted and there are more shows the following But I can not act on each of these classes separately</p> <p>Then I have a container with several equal classes</p> <p>html:</p> <pre><code>&lt;div class="container"&gt; &lt;p class="active"&gt;&lt;span&gt;1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis justo sit amet odio posuere fringilla. Sed et nunc ligula. Cras faucibus porttitor ipsum.&lt;/span&gt; &lt;a title="Ver más mensajes" href="javascript:void(0)"&gt;Siguiente mensaje&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/p&gt; &lt;p&gt;&lt;span&gt;1 Praesent sagittis justo sit amet odio posuere fringilla. Sed et nunc ligula. Cras faucibus porttitor ipsum, non accumsan sem varius mollis.&lt;/span&gt;&lt;a title="Ver mensaje anterior" href="javascript:void(0)"&gt;Mensaje anterior&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="container"&gt; &lt;p class="active"&gt;&lt;span&gt;1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis justo sit amet odio posuere fringilla. Sed et nunc ligula. Cras faucibus porttitor ipsum.&lt;/span&gt; &lt;a title="Ver más mensajes" href="javascript:void(0)"&gt;Siguiente mensaje&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/p&gt; &lt;p&gt;&lt;span&gt;1 Praesent sagittis justo sit amet odio posuere fringilla. Sed et nunc ligula. Cras faucibus porttitor ipsum, non accumsan sem varius mollis.&lt;/span&gt;&lt;a title="Ver mensaje anterior" href="javascript:void(0)"&gt;Mensaje anterior&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/p&gt; &lt;/div&gt; etc... </code></pre> <p>css:</p> <pre><code>.pieza .container p{display:none;overflow:hidden} .pieza .container p.active{display:block} </code></pre> <p>and: </p> <pre><code>$(".container p.active").fadeIn("slow"); $(".container p &gt; a").live('click', function(e) { e.preventDefault(); $('.container p').toggle('fast'); $(this).parent().fadeOut('fast', function() { $(this).closest('.container p').remove(); }); }); </code></pre> <p>but it acts on all classes how I can act alone in each zone?</p> <p>thanks in advance</p> <p><a href="http://jsfiddle.net/JcDzN/4/" rel="nofollow">example in action</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