jquery - 动态添加元素到控件组 jQuery mobile 1.3

Question

在动态添加或删除元素时，我总是遇到问题controlgroup。值得庆幸的是，JQM 1.3为此提供了一个例子。

但是示例代码非常混乱。谁能解释该container()方法的工作原理以及方法是什么buttonMarkup()？

$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );

score 2 · Accepted Answer

您可能知道您为jQuery Mobile编写的HTML实际上与最终结果不同。当jQuery Mobile构建页面时，它会更改最终的HTML内容。

如果您了解什么是容器元素，这一点很重要。执行此方法时：

$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );

方法将填充内容。仅仅访问不会给我们正确的内容位置。controlgroup #my-controlgroup$('#my-controlgroup')DOMcontrolgroup

这部分：

[ $( this ).attr( "id" ) ]

controlgroup 在这里只是为了表示数组中的第 n 个controlgroups。

有关这方面的更多信息，可以在此处的官方文档中找到。

关于第二个问题，这个方法：

buttonMarkup()

用于更改jQuery Mobile按钮外观。例如，这将改变按钮角的外观：

$( "a" ).buttonMarkup({ corners: false });

或更改按钮图标：

$( "a" ).buttonMarkup({ icon: "star" });

这可以在这里找到。

score 2 · Accepted Answer

 $( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr(
 "id" ) ]( $el );

这转化为

$( "#my-controlgroup" ).controlgroup( "container" ).append( $el );
OR
$( "#my-controlgroup" ).controlgroup( "container" ).prepend( $el );

其中 $el 不是您想要附加或添加到组的新元素。该演示代码中令人困惑的部分是他们在点击元素的 ID 属性中保留了方法名称（追加、前置），这就是他们如何根据点击的元素动态识别操作的方式。

2 回答 2