jquery - 如何在jquery mobile可折叠列表中添加多个图标

Question

我想在 jquery 移动可折叠列表的加号图标附近添加另一个图标。但无法添加它，因为 jquery mobile 会动态创建该图标。任何建议将不胜感激！

Answer 1

This is certainly a hack but you can wait for the page to initialize, then find the list-view widget and append the jQuery Mobile HTML for an icon to each list-item:

//wait for a certain pseudo-page to initialize
$(document).delegate('#home', 'pageinit', function () {

    //find the listview and append to it's second tier children (the `<div class="ui-btn-inner ui-li" />` element)
    $(this).find('ul[data-role="listview"]').children().children().append('<span class="ui-icon ui-icon-home ui-icon-shadow" style="right:30px;">&nbsp;</span>');
});​

Notice I changed the right CSS property of the new icon so it doesn't overlap the initial icon.

Here is a demo: http://jsfiddle.net/uZxXB/

Answer 2

<fieldset data-role="collapsible" data-iconpos="left" >
                        <h1 ><span    class="ui-icon ui-icon-home ui-icon-shadow ui-btn-icon-right" style="right:30px;">&nbsp;</span>Header</h1>

您可以在html中添加它

两个图标，一个在左边，另一个在右边，将 jQuery min 的 css 更改为文本对齐中心

.ui-collapsible-heading .ui-btn{text-align:center;margin:0;border-left-width:0;