Jquery标签MVC避免重复标签

Question

我点击时有一系列链接添加使用jquery的标签。

function addTab(title, uri) { 
    var newTab = $("#tabs").tabs("add", uri, title); 
} 

我只想每个链接一个标签。如果用户不断按下链接，它会不断添加新标签到该div。

一个办法，我的想法是将一个ID锚定是那是制表的丽内部创建的jQuery，但我不;吨看怎么做，所以

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-4"><span>Ncollison Collison</span></a></li> 

，而不是justtab数jquery给我想添加具有唯一值的id，我将传递给该方法。所以这<a href="#ui-tabs-4">成为<a href="#ui-tabs-4" id="12323">，所以我可以检查这个ID之前，我添加另一个选项卡。 我不知道如何添加这个独特的值到标签锚点右键后，我添加上面的方法标签addTab（标题，uri，uniquevlaue）。

EDIT1

$(function() { 

    $('#tabs').tabs(
     { cache: true }, 
     { 
      ajaxOptions: { 
       cache: false, 
       error: function (xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab."); 
       }, 
       data: {}, 
       success: function (data, textStatus) { } 
      }, 
      add: function (event, ui) { 
       //select the new tab 
       $('#tabs').tabs('select', '#' + ui.panel.id); 
      } 
     }); 
}); 

function addTab(title, uri) { 
    // If tab already exist in the list, return 
    if ($("#" + title).length != 0) 
     return; 
    var newTab = $("#tabs").tabs("add", uri, title); 
} 

function closeTab() { 
    var index = getSelectedTabIndex(); 
    $("#tabs").tabs("remove", index) 
} 

function getSelectedTabIndex() { 
    return $("#tabs").tabs('option', 'selected'); 
} 

function RefershList() { 
    $('#frmPeopleList').submit(); 
} 


    <div id="tabs"> 
     <ul> 
     </ul> 
    </div> 

我有把这个类似于下面

<input id="btnAddTab" type="button" onclick="addTab('Add Person','<%= Url.Action("Create", "People") %>')" value='Add New Person' /> 

EDIT 2 生成的HTML链接

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> 
     <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
     <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-4"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-6"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top"><a href="#ui-tabs-8"><span>Rwestbrook Westbrook</span></a></li><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#ui-tabs-10"><span>Rwestbrook Westbrook</span></a></li></ul><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2> 
<input type="text" value=" " id="msg"> 
<input type="button" value="send" id="send"> 
<ul id="message"> 
</ul></div><div id="ui-tabs-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2> 
<input type="text" value=" " id="msg"> 
<input type="button" value="send" id="send"> 
<ul id="message"> 
</ul></div><div id="ui-tabs-6" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2> 
<input type="text" value=" " id="msg"> 
<input type="button" value="send" id="send"> 
<ul id="message"> 
</ul></div><div id="ui-tabs-8" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><h2>Chat</h2> 
<input type="text" value=" " id="msg"> 
<input type="button" value="send" id="send"> 
<ul id="message"> 
</ul></div><div id="ui-tabs-10" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><h2>Chat</h2> 
<input type="text" value=" " id="msg"> 
<input type="button" value="send" id="send"> 
<ul id="message"> 
</ul></div> 
    <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div><div id="ui-tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-5" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-7" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div><div id="ui-tabs-9" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div></div> 

URI仙t是'/聊天/ AddChat

Answer 1

试试这个，环thorugh选项卡，并为您的标题是否存在..create

function addTab(title, uri) { 
    var tabNameExists = false; 
    $('#tabs ul li a').each(function(i) { 
    if (this.text == title) { 
    tabNameExists = true; 
    } 
    }); 

if (!tabNameExist){ 
    var newTab = $("#tabs").tabs("add", uri, title); 
} 

} 

Answer 2

你应该检查是否有一个选项卡链接到该URL。做到这一点的方法之一是：

$('a.ui-tabs-anchor[href="' + uri + '"]').length > 0; 

的的.ui-标签锚是分配给“A”标记的标签，至少在目前的jQuery UI的类版本。

- 上面的代码是为jQuery的UI 1.9，1.8（也可能是以前的版本）：

function urlExists(uri) { 
    var exists = false; 
    $.each($('#tabs a'), function() { 
     exists = exists || $(this).data('href.tabs') == uri } 
    ); 
    return exists; 
}