Criando múltiplas abas jQuery - javascript, jquery, html, asp.net-mvc, jquery-ui-tabs

Eu tenho uma página ASP.NET MVC que cria divs dinamicamente dentro de uma guia jQuery existente.

As guias pai estão chegando bem, mas por algum motivo as subseções não são criadas.

Meu código Razor é assim:

<div id="mainView">
<ul class="mainMenu">
@foreach(var myView in mainView.Childs)
{
<li><a href="#@(myView.Name)">@myView.Name</a></li>
}
</ul>
@foreach(var myView in mainView.Childs)
{
if(myView.HasChilds)
{
<div id="@myView.Name" class="subView">
<ul class="subMenu">
@foreach(var sub in myView.Childs)
{
<li><a href="#@(sub.Name)">@sub.Name</a></li>
}
</ul>
@foreach(var sub in myView.Childs)
{
<div id="@sub.Name">
// Content goes here
</div>
}
</div>
}
else
{
//Content for else
}
}
</div>

Então, em jQuery

$("#mainView").tabs();

funciona muito bem. Mas quando eu faço

$("#mainView .subView").tabs();

Isso me dá um erro "jQuery UI Tabs: Identificador de fragmento incompatível ". Eu verifiquei o HTML resultante e não tem nenhum erro. Eu não sei se podemos criar guias como este ou não. Por favor me guie.

Respostas:

Tente isto:

$("#mainView > .subView").tabs();

Espero que funcione ...!