Question

我不知道我是否错误地使用.after但我的理解是应显示我指定的元素之后的元素？ - Option1选择后的hello world选择框？

<select id="cselect" >
<option value="Option 1">Option 1</option>

</select>

$('#cselect').chosen();

var test = '<select id="dselect" ><option>Hello World</option></select>';  

$('#cselect').after(test);

$('#dselect').chosen();

在这里摆弄 - http://jsfiddle.net/jHvmg/4/

我错过了什么？ TIA

Answer 1

它与所选插件有关。当您第一次在chosen上拨打select时，您最终会得到此信息（伪代码）：

<select id="select1"></select>
<div id="chosenForSelect1"></div>

添加新select后，您就拥有了这个：

<select id="select1"></select>
<select id="select2"></select>
<div id="chosenForSelect1"></div>

然后，您在第二个.chosen()上致电select，最后得到：

<select id="select1"></select>
<select id="select2"></select>
<div id="chosenForSelect2"></div>
<div id="chosenForSelect1"></div>

因此在第一个元素之后添加了实际的select元素，但支持所选插件的div是不合适的。最好将新select附加到容器，为每个select添加容器，或者在所选插件的html后追加。

Answer 2

.after()在匹配元素集中的每个元素之后插入由参数指定的内容。您正在以正确的方式使用它。检查使用上面的代码创建的DOM顺序。您可以看到body标记内的第一个HTML元素是：

<select id="cselect" style="display: none;">
    <option value="Option 1">Option 1</option>
</select>

，第二个是：

<select id="dselect" style="display: none;"><option>Hello World</option></select>

如果选择已创建div's，则动态订单已更改。

解决方案：使用.after apply将动态html代码添加到DOM后，选择如下：

var test = '<select id="dselect" ><option>Hello World</option</select>';  

$('#cselect').after(test);
 $('#cselect').chosen();
$('#dselect').chosen();

的 DEMO FIDDLE

Answer 3

如果您查看插件生成的HTML，它实际上会隐藏选择并在其后面添加一个div，即实际选择的渲染。

所以你最终得到的是：

<select id="cselect" style="display: none;">
    <option value="Option 1">Option 1</option>
</select>
<select id="dselect" style="display: none;">
    <option>Hello World</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 94px;" title="" id="dselect_chosen"> ... </div>
<div class="chosen-container chosen-container-single" style="width: 76px;" title="" id="cselect_chosen"> ... </div>

实际上你最终会在cselect之前插入dselect。

在这种情况下，jquery应该如何工作？

3 个答案: