Добавление класса css в div с jquery внутри цикла foreach MVC

Question

Как гласит заголовок.

Я пытаюсь добавить заголовки на основе определенных значений в моей модели.

в настоящее время это выглядит примерно так:

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

который, кажется, не работает, так как добавляет тонну классов к первым двум строкам, а затем постепенно не добавляет один.

Answer 1

Ваш вопрос несколько сбивает с толку, но кажется, что вы пытаетесь добавить классы до того, как контент будет создан на странице.Вам нужно использовать функцию jQuery.ready(), чтобы дождаться применения классов, пока DOM не будет готов.Например:

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

Справка для обучения: jQuery .ready ()

Answer 2

Что-то здесь не так, это, конечно, не будет выполняться, и потребуется что-то вроде jQuery's ready (), но даже если у каждого есть jQuery.ready (), каждый раз, когда этот код выполняется для каждой дорожки в Model, он будет захватывать он имеет ".model-attribute-wrapper" и будет продолжать добавлять класс. В конце у последнего будут все классы ранее выполненных треков в модели.

Я думаю, вам нужно обрабатывать каждую дорожку по идентификатору или чему-то другому, а не по универсальному классу ".model-attribute-wrapper"

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

Answer 3

Получите хендл в ваших средах исполнения.

ASP запускается на сервере при отображении страницы.

JavaScript запускается в браузере (хорошо после завершения рендеринга страницы).).

Кроме того, все ваши селекторы jQuery одинаковы.