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

Question

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.

N Rohler · Accepted Answer · 2011-10-20 22:26:39Z

2

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()

answered Oct 20, 2011 at 22:26

N Rohler

4,61526 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Birey · Accepted Answer · 2011-10-20 22:52:17Z

1

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 
});

answered Oct 20, 2011 at 22:52

Birey

1,81216 silver badges20 bronze badges

1 Comment

Puzzle84 Over a year ago

i actually fixxed it differently. no javascript involved.

string style = "";                      if (track.G1) { style = " G1"; }                 else if (track.Handicap) { style = " handicap"; }                 else if (track.Special) { style = " special"; }                 else if (track.BestRight) { style = " bestright"; }                 else if (track.Dirt) { style = " dirt"; }                 else if (even) {style = "even"; even = false;}                 else if (!even) { style = " odd"; even = true;}

and i then render this string in my div class

DwB · Accepted Answer · 2011-10-20 22:28:26Z

1

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.

answered Oct 20, 2011 at 22:28

DwB

38.6k11 gold badges62 silver badges86 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related