jQuery UI可選：獲取所選項目的文本

此代碼如果來自jQuery可選擇的UI（https://jqueryui.com/selectable/#serialize）。我該如何修改它以在所選的索引中追加text值。jQuery UI可選：獲取所選項目的文本

我嘗試過很多辦法不成功：

var index = $("#selectable li").text();＃追加一切
var index = $("#selectable li").html();＃這追加的第一個項目，停止

$(function() { 
    $("#selectable").selectable({ 
     stop: function() { 
      var result = $("#select-result").empty(); 
      $(".ui-selected", this).each(function() { 
       var index = $("#selectable li").index(this); 
       result.append(" #" + (index + 1)); 
      }); 
     } 
    }); 
}); 


    <ol id="selectable"> 
     <li class="ui-widget-content">Item 1</li> 
     <li class="ui-widget-content">Item 2</li> 
     <li class="ui-widget-content">Item 3</li> 
     <li class="ui-widget-content">Item 4</li> 
     <li class="ui-widget-content">Item 5</li> 
     <li class="ui-widget-content">Item 6</li> 
    </ol>

來源

2014-02-23 fyz

從documentation for .text()：

獲取該組匹配元件的每個元件的組合的文本內容，包括其後代

從documentation for .html()：

獲取第一個的HTML內容匹配組中的元素元素

你可以試試這個：

$("#selectable").selectable({ 
    stop: function() { 
     var text = $(this).children(".ui-selected").map(function() { 
      return $(this).text(); 
     }).get().join('; '); 
     $("#select-result").text(text); 
    } 
});

jsfiddle

它使用.map() function讓每個所選項目的文本。這返回一個實際上包含字符串對象而不是DOM元素的jQuery對象，因此.get() function用於獲取字符串數組。然後array's .join() function用於組合字符串。

來源

2014-02-23 22:35:20

是的我修改了你的例子工作，但你能解釋爲什麼這是如何完成的？爲什麼我不能直接調用'.text（）'（我正在學習jQuery）所以我們歡迎您解決問題的思路。 – fyz

@feed_me_code - 你可以直接調用'.text（）'獲得所有選中項目的組合文本，如[jsfiddle]（http://jsfiddle.net/BF9Gx/1/）所示，但是沒有分隔符。這就是'.text（）'函數在多個元素上調用時的工作方式。獲取數組中的文本爲您提供了更大的靈活性。 –

$("#selectable")selectable({ 
    stop: function() { 
     var text += $(this)children(".ui-selected").map(function() { 
      return $(this).text(); 
     }).get().join('; '); 
     $("#select-result").text(text); 
    } 
});

來源

2014-03-06 11:28:15 santosh

jQuery UI可選：獲取所選項目的文本

回答

相關問題