Question

我的问题是，当我将一些图标附加到div时，它会从左到右附加。但是如何从右到左附加这些图标。

代码：

$('.icons').empty();
if (data_arr[0] != ""){
            $('.icons').append('<i class="far fa-calendar icon"></i>&nbsp;&nbsp;');
        }
if (data_arr[1] != ""){
            $('.icons').append('<i class="fas fa-sort-numeric-up icon"></i></i>&nbsp;&nbsp;');
        }
if (data_arr[2] != ""){
            $('.icons').append('<i class="fas fa-truck icon"></i>&nbsp;&nbsp;');
        }
if (data_arr[3] != ""){
            $('.icons').append('<i class="fas fa-dharmachakra"></i>&nbsp;&nbsp;');
        }

如上图所示。从下拉菜单中选择项目后，它将在div上方添加一个图标。我希望这些图标从右到左添加到div中。

编辑1：像这样的东西。

Answer 1

您应该使用.prepend()而不是.append()。

$('.icons').prepend('<i class="far fa-calendar icon"></i>&nbsp;&nbsp;');

还有.after()和.before() jQuery函数。

基于您的代码的完整示例（不使用font-awesome）：

<div class="icons"></div>

$(".icons").empty();

var data_arr = ['first', 'second', 'third', 'fourth'];

if (data_arr[0]) {
  $(".icons").prepend('<i class="icon">first</i>&nbsp;&nbsp;');
}
if (data_arr[1]) {
  $(".icons").prepend('<i class="icon">second</i>&nbsp;&nbsp;');
}
if (data_arr[2]) {
  $(".icons").prepend('<i class="icon">third</i>&nbsp;&nbsp;');
}
if (data_arr[3]) {
  $(".icons").prepend('<i class="icon">fourth</i>&nbsp;&nbsp;');
}

希望对您有帮助！

Answer 2

您可以重新排列它，使其最终看起来像您想要的样子，或者您也可以使用jQuery insertBefore()方法。我做了以下示例，看哪个对您更合适。

$('.icons').empty();

var data_arr = ['1','2','3','4']

$('.icons').append('<i class="first-icon far fa-calendar icon"></i>&nbsp;&nbsp;');

$('<i class="fas fa-dharmachakra"></i>&nbsp;&nbsp;').insertBefore(".first-icon");

$('<i class="fas fa-truck icon"></i>&nbsp;&nbsp;').insertBefore(".first-icon");

$('<i class="fas fa-sort-numeric-up icon"></i></i>&nbsp;&nbsp;').insertBefore(".first-icon");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>
<div class='icons'>
</div>

$('.icons').empty();

var data_arr = ['1','2','3','4']


if (data_arr[0] != ""){
            $('.icons').append('<i class="fas fa-dharmachakra"></i>&nbsp;&nbsp;');
}
if (data_arr[1] != ""){
            $('.icons').append('<i class="fas fa-truck icon"></i>&nbsp;&nbsp;');
}    
if (data_arr[2] != ""){
            $('.icons').append('<i class="fas fa-sort-numeric-up icon"></i></i>&nbsp;&nbsp;');
}
if (data_arr[3] != ""){
            $('.icons').append('<i class="far fa-calendar icon"></i>&nbsp;&nbsp;');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>
<div class='icons'>
</div>

在div中，如何从右向左追加项目？

2 个答案: