CODEWITHSUNDEEP
javascriptjquerycssasp.net-mvc-3razor
Puzzle84
Puzzle84

Reputation: 540

Adding css class to a div with jquery inside an MVC foreach loop

As the title states.

i am trying to add headers based on certain values within my model.

currently it looks something like this.

foreach (var track in Model)
        {
            if (track.G1)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("G1");
                </script>
            }
            else if (track.Handicap)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("handicap");
                </script>
            }
            else if (track.Special)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("special");
                </script>
            }
            else if (track.BestRight)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("bestright");
                </script>
            }
            else if (track.Dirt)
            { 
                <script type="text/javascript">
                    jQuery(".model-attribute-wrapper").addClass("dirt");
                </script>
            }
            if (even)
            {
                even = false;

                <div class="model-attribute-wrapper even">
                    <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div>
                    <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div>
                    <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div>
                    <div class="model-attribute action">
                        <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div>
                        <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div>
                    </div>
                </div>
            }
            else
            {
                even = true;
               <div class="model-attribute-wrapper odd"> 
                    <div class="model-attribute xx-small">@Html.DisplayFor(modelItem => track.Id) </div>
                    <div class="model-attribute huge">@Html.DisplayFor(modelItem => track.Name) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Handicap) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Special) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Dirt) </div>
                    <div class="model-attribute medium">@Html.DisplayFor(modelItem => track.BestRight) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.G1) </div>
                    <div class="model-attribute small">@Html.DisplayFor(modelItem => track.Distance) </div>
                    <div class="model-attribute action">
                        <div class="model-action">@Html.ActionLink("Edit", "Edit", new { id = track.Id }) </div>
                        <div class="model-action">@Html.ActionLink("Delete", "Delete", new { id = track.Id }) </div>
                    </div>
                </div>
            }
        }

which does not seem to be working as it adds a ton of classes to the first 2 rows then it gradually seems to not add one.

Upvotes: 0

Views: 2105

Answers (3)

Birey
Birey

Reputation: 1802

Something seems wrong here, this wont execute of course and would need something like jQuery's ready() , but even if each one has jQuery.ready(), every time this code executes for each track in Model, it will grab anything that has ".model-attribute-wrapper" and will keep on adding the class. In the end the last one will have all the classes of previously executed tracks in the model.

I think you need to handle each track by id or something rather than generic class ".model-attribute-wrapper" 

$(document).ready(function(){ 
  $("#trackid").addClass("G1"); // something like this 
});

Upvotes: 1

DwB
DwB

Reputation: 38320

Get a handle on your execution environments.

ASP stuff is run on the server when the page is rendered.

JavaScript stuff runs on the browser (well after the page rendering is complete).

Also, all of your jQuery selectors are the same.

Upvotes: 1

N Rohler
N Rohler

Reputation: 4615

Your question is somewhat confusing, but it appears that you're trying to add the classes before the content has been created in the page. You need to use the jQuery.ready() function to wait to apply the classes until after the DOM is ready. For example:

jQuery(function(){
   jQuery(".model-attribute-wrapper").addClass("G1");
});

Reference for learning: jQuery .ready()

Upvotes: 2

Related Questions