jQuery UI選項卡：在第二個位置添加選項卡

Question

我在第一個和第二個標簽之間添加一個標簽時遇到麻煩。

我按下按鈕時，在第一個和第二個選項卡之間應出現一個帶有演示內容的新選項卡。

這是我的小提琴：

https://jsfiddle.net/schludi/egpwnhLq/30/

當我按下添加按鈕時，帶有示例內容的新選項卡應出現在第一個和第二個選項卡之間。

$( function() {

var tabs = $( "#tabs" ).tabs();


// Actual addTab function: adds new tab using the input from the form above.
function addTab() {
  var li = $("<li><a href='#tabs-2'>OP(s)</a></li>");

  tabs.find( ".ui-tabs-nav").append( li );
  tabs.append( "<div id='tabs-3'>This should appear between first and second.</div>" );
  tabs.tabs( "refresh" );
}

// AddTab button: just opens the dialog
$( "#add_tab" )
  .button()
  .on( "click", function() {
          addTab();
  });

Answer 1

.append()將始終在所選元素的末尾插入內容，作為該元素的子元素。

您想要做的是找到第一個選項卡條目，然后在其后直接插入一些內容（但不要作為其子項）。 為此，您可以使用CSS :first-child選擇器和jQuery .after()方法：

function addTab() {
  var li = $("<li><a href='#tabs-3'>OP(s)</a></li>");
  tabs.find( ".ui-tabs-nav li:first-child").after( li ); //changed this line
  tabs.append( "<div id='tabs-3'>This should appear between first and second</div>" );
  tabs.tabs( "refresh" );
}

有關有效的演示，請參見https://jsfiddle.net/egpwnhLq/42/ 。

有關選擇器和使用的方法的文檔，請參見https://api.jquery.com/first-child-selector/和http://api.jquery.com/after/ 。