CODEWITHSUNDEEP
jqueryasp.net-mvc
sitBy
sitBy

Reputation: 269

Setting Id not working when iterating through

var i = 0;

@foreach (var item in Model)
{
    <text>

    $('#jp_audio_' + i).attr("id", "#[email protected]")
    i++;

    </text>
}

i++ seems to stop it from working. If i++ is not there then it does set #jp_audio_0 to new id, but I need to set all of the ids to new value, not just first one. Any ideas why?

Html with i++ (Id's not being set to new value);

<audio id="jp_audio_0" preload="metadata" src="http://localhost:6060/Music/StreamPublishedSongs/95"></audio>
<audio id="jp_audio_1" preload="metadata" src="http://localhost:6060/Music/StreamPublishedSongs/96"></audio>

without i++ in code (first 1 being set actually working);

<audio id="#jp_audio_96" preload="metadata" src="http://localhost:6060/Music/StreamPublishedSongs/95"></audio>
<audio id="jp_audio_1" preload="metadata" src="http://localhost:6060/Music/StreamPublishedSongs/96"></audio>

Upvotes: 0

Views: 125

Answers (3)

tabz100
tabz100

Reputation: 1473

Try to convert your variables to C#:

@{
int i = 0;
} 
@foreach (var item in Model)
 { 
<text> 
$('#jp_audio_' + @i).attr("id", "#[email protected]"); 
@{i++;} 
</text> 
}

Upvotes: 2

Evicted Cache
Evicted Cache

Reputation: 1401

Without being able to see the structure of the 'Model' object, it's hard to tell what's going on. Here's a jQuery example outputting the values the way I think you want them. Notice how I've structured the object so that I can access the items' properties via Model.items in the loop. 

$(function(){
  var Model = {
        items: [{
            id: 'ID-1234',
            name: 'foo'
        }, {
            id: 'ID-4567',
            name: 'bar'
        }]
    },
    i = 0
  ;
  for( item in Model.items) {
    $('#jp_audio_' + i).attr("id", "#jp_audio_"+Model.items[i].id);
    
    // output some text so we can see the IDs we're changing
    $('.container').append("#jp_audio_"+Model.items[i].id+'<br/>');
    i++;
  } 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <audio id="jp_audio_0" preload="metadata" src="#"></audio>
  <audio id="jp_audio_1" preload="metadata" src="#"></audio>
</div>

Upvotes: 0

jonmrich
jonmrich

Reputation: 4323

You need something more like this...I'm using pure JS, so you'll have to apply to your situation (MVC):

for (i = 0; i < 2; i++) {
    $('#jp_audio_' + i).attr("id", "#[email protected]")
}

Here i would start at 0 and then end at 1. Not sure where you need to start and top though.

Upvotes: 0

Related Questions