Databases
StackOverflow2013
Postsdbo
POFind and show specific section dynamically with jQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFind and show specific section dynamically with jQuery?
    text
    copied!<p>I have a column with multiple instances of similar classes. Classes being refHeader1, refHeader2, refHeader3 and ref1select, ref2select, ref3select, and refScen1, refScen2, refScen3. Below, the numbers are being replaced by @{@i} to be driven dynamically. What I need is when clicking on (this) ref@{@i}select, the closest refScen@{@i} span is shown and all the rest of the refScen@{@i} spans are hidden. So far, I've tried the jQuery below with no luck. What am I doing wrong? In the console, I am just getting empty [ ] brackets when trying to find closest. Thanks in advance. <a href="http://jsbin.com/ezODiTAV/1/edit" rel="nofollow">http://jsbin.com/ezODiTAV/1/edit</a></p> <p><strong>jQuery</strong></p> <pre><code>$("span[class*=select]").click(function () { // first hide all refScen spans $('span[class^=refScen]').hide(); // show this refScen span //$(this).closest('span[class^=refScen]').show(); //$(this).find().closest('span[class^=refScen]').show(); //$(this).find().next('span[class^=refScen]').show(); }); </code></pre> <p><strong>HTML</strong> </p> <pre><code>&lt;div class="col-md-12 padT nPadL nPadR" style="padding-bottom:10px"&gt; &lt;span class='refHeader@{@i}'&gt; &lt;a href="#"&gt;&lt;label&gt;@item.Name&lt;/label&gt;&lt;/a&gt; &lt;div class="glyphicon glyphicon-chevron-down text-right ref@{@i}select"&gt;&lt;/div&gt; &lt;/span&gt; &lt;/div&gt; &lt;!-- /left options --&gt; &lt;span class='refScen@{@i}'&gt; &lt;div class="col-md-9 col-md-offset-3 padB nPadL nPadR"&gt; &lt;a href="#"&gt;@listitem.Name&lt;/a&gt; &lt;/div&gt; &lt;/span&gt; </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