使用带有选择框的jQuery的insertAfter()是否存在已知的性能问题?

时间:2012-04-23 21:21:53

标签: javascript jquery dom

我有两个“页面”(基本上是两个div标签;一次只显示一个)。根据用户所在的“页面”,选择框将显示在第1页的jQuery UI对话框中(作为滑块),或在第2页上显示为普通选择框。我的问题是,我可以使用insertAfter()将选择框从一个页面/ div移动到另一个页面/ div吗?或者,更具体地说,我不应该有任何理由吗?我已经回避了clone()函数,因为它创建了重复的ID,并且基本上复制每个选择框并尝试同步它们的值似乎有点过分,除非有充分的理由不使用insertAfter()。< / p>

这是代码的模型,以防我的解释不清楚:

HTML:

    <div id="page1">
         <select id="tango">
            <option>Jester</option>
         </select>
    </div>

<div id="page2">
   <div id="dialog">
       <!-- Select Menu would be inserted/moved here -->
   </div>
</div>

JavaScript的:

$('select#tango').insertAfter('#dialog');

3 个答案:

答案 0 :(得分:2)

使用$('select#tango').insertAfter('#dialog');脚本实际上会导致:

<div id="page2">
   <div id="dialog">

   </div>
   <!-- Select Menu would be inserted/moved here -->
</div>

我认为您真正希望将它放置在您希望的位置:

$('select#tango').appendTo('#dialog');

答案 1 :(得分:1)

  

我的问题是,我可以使用insertAfter()移动选择框   一页/ div到另一页?或者,更具体地说,我有什么理由   不该&#39;?吨

不,没有理由不能或不应该这样做。

答案 2 :(得分:1)

它没有任何问题。这是一个有效的演示http://jsfiddle.net/pomeh/FA23E/

HTML代码

<div id="page1">
     <select>
        <option>A</option>
        <option>B</option>
        <option>C</option>
     </select>
</div>

<div id="page2">
   <div id="dialog">
       <!-- Select Menu would be inserted/moved here -->
   </div>
</div>

<input type="button" value="Dance for me !" />

Javascript代码

var clicks = 0,
    $select = $("select"),
    $targets = [ $("#dialog"), $("#page1") ];

$("input").on("click", function() {
    var $target = $targets[ clicks++ % 2 ];

    $select.appendTo( $target  );
});