Databases
StackOverflow2013
Postsdbo
POIncrease div id by 1 using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIncrease div id by 1 using jQuery
    primarykey
    data
    text
    <p>I would appreciate any and all help you can provide. I have searched high and low and have not been able to find a solution to what I think is probably a common issue. I am very new to ASP.NET MVC and jQuery so I may need a little extra hand holding. Here it goes...</p> <p>I have a table with many rows that is created by a foreach (ASP MVC 4). Each row has additional information that I would like to show / hide on click (contained in a ). </p> <p>For example:</p> <pre><code>==================================================================== | Ticket Number | Date Created | Description - 123456 11/02/2012 How do I...? --- Additional Information --- Assigned To: Joe Notes: Blah, blah --- End Additional Information --- + 123457 11/01/2012 When I click this I get.... ===================================================================== </code></pre> <p>When the user clicks the plus sign (I'm using an image), I want the Additional Information to expand and I want the plus image to change to a minus image.</p> <p>I have figured out how to change the image using an IF statement in jQuery. However, I can't quite figure out how to toggle the div properly. I have tried doing this using the following:</p> <pre><code> $("button").click(function () { $(this).next("div.toggleMe").toggle(1000); }); </code></pre> <p>As you can see, the jQuery expands the next div that it finds. The problem with this is that I can't put it in the same row as the table data. It just doesn't see the next div for some reason.</p> <p>What I am looking for is a way to increase the id, or class of the div by one so that I can use something like the following jQuery function:</p> <pre><code> function slideonlyone(thechosenone) { $('.newboxes2').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).slideDown(200); } else { $(this).slideUp(600); } }); } &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt; &lt;a id="myHeader1" href="javascript:slideonlyone('newboxes1');" &gt;slide this one only&lt;/a&gt; &lt;/div&gt; &lt;div class="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;"&gt;Div #1&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt; &lt;a id="myHeader2" href="javascript:slideonlyone('newboxes2');" &gt;slide this one only&lt;/a&gt; &lt;/div&gt; &lt;div class="newboxes2" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #2&lt;/div&gt; &lt;/td&gt; &lt;td&gt; &lt;div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"&gt; &lt;a id="myHeader3" href="javascript:slideonlyone('newboxes3');" &gt;slide this one only&lt;/a&gt; &lt;/div&gt; &lt;div class="newboxes2" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;"&gt;Div #3&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>As you can see in the HTML, each div has a unique id. How do I create a unique id in a foreach loop? And, how do I get jQuery to see that unique id so that I can toggle the div?</p> <p>Thank you so much for any info you can provide!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStereško
    1. USSteve H
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIncrease div id by 1 using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POIncrease div id by 1 using jQuery
      1. USSteve H
      1. VTFavorite
    1. COare you aware that `$(this).attr("id")` can be written as `this.id`, or are you using jQuery for *optimization* ?
      singulars
      1. POIncrease div id by 1 using jQuery
      1. UStereško
    2. COUse a class on the anchor and `$(this).closest('div').next('div')` to get the div.
      singulars
      1. POIncrease div id by 1 using jQuery
      1. USadeneo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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