Question

我有这段代码：

<div class="input-append">

    //FIRST ELEMENT 

    <select name="branch_group_limit" id="select_library">
        <option value="">All libraries</option>                               
        <option value="branch:01">Main Library</option>                               
    </select>

    //SECOND ELEMENT

    <button type="submit" id="searchsubmit" class="btn btn-success">Go</button>
</div>

元素的排列看起来像这样。

FIRST ELEMENT | SECOND ELEMENT

但是当我尝试使用Jquery自定义我的第一个元素时：

$('#select_library').parent().append('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');
$('#select_library option').each(function(){
   $('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newselect_library').append('</ul></div>');
$('#select_library').remove();
$('#newselect_library').attr('id','select_library');

我的元素的排列结果是：

SECOND ELEMENT | FIRST ELEMENT

我的HTML输出是：

<div class="input-append">

     //SECOND ELEMENT                                    

    <button type="submit" id="searchsubmit" class="btn btn-success">Go</button>

    //MODIFIED FIRST ELEMENT

    <div class="btn-group btn-input clearfix">
        <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
            <span data-bind="label">All libraries</span> <span class="caret"></span>
        </button>
        <ul id="select_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li value="" role="presentation"><a tabindex="-1" role="menuitem">All libraries</a></li>
            <li value="branch:01" role="presentation"><a tabindex="-1" role="menuitem">Main Library</a></li>
        </ul>
   </div>
</div>

我不知道该怎么做以保持其原始安排。如果我不能发布图像。 Anyhelp非常感谢。谢谢。

SOLUTION：

我使用prepend而不是在我的jquery代码中附加。

$('#select_library').parent().prepend('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');
$('#select_library option').each(function(){
   $('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newselect_library').append('</ul></div>');
$('#select_library').remove();
$('#newselect_library').attr('id','select_library');

Answer 1

如果float：left不起作用，请尝试前置

$("button").click(function(){

$（“p”）。prepend（“ Prepended text ”）; }）;

Answer 2

将css设置为您的元素：

position: relative:
float: left;

那就是它;

Answer 3

您要将newselect-library附加到主div，这将改变他们在dom中的顺序。任何append操作都会在最后子项后插入新元素。

追加之前：

select_library - searchsubmit

追加后（添加到子列表的末尾）：

select_library - searchsubmit - newselect_library

删除后：

searchsubmit - newselect_library

用div包裹你的select_library，所以它总是在dom树中的按钮之前。

<div class="input-append">

    //FIRST ELEMENT 
    <div class="select-holder">
    <select name="branch_group_limit" id="select_library">
        <option value="">All libraries</option>                               
        <option value="branch:01">Main Library</option>                               
    </select>
    </div>

    //SECOND ELEMENT

    <button type="submit" id="searchsubmit" class="btn btn-success">Go</button>
</div>

浮动Div向左

3 个答案: