Question

假设我有一个像这样的数组，它将被添加到ul中，如下所示

File file = new File(getClass().getClassLoader().getResource(fileName).getFile());

上面发生的事情没有data['productDetailOptions'] = ['red', 'blue', 'big', 'small', 'medium']; $('.cart-productDetailOptions ul').append(data['productDetailOptions']);标签我知道我肯定可以使用for循环遍历每个数组并添加标签然后将它们分配到一个新变量中。

我想知道是否有更容易和更短的方式，所以我不必使用循环？

编辑：我的坏，我应该说除了使用for循环之外的任何其他方式。对不起有误解

Answer 1

可以使用join（）而无需编写自己的循环来生成可附加的html字符串

var html = '<li>' + data['productDetailOptions'].join('</li><li>') + '</li>';

$('.cart-productDetailOptions ul').append(html);

Answer 2

尽可能少地致电<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/activity_horizontal_margin"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="2dip" android:paddingTop="6dip" android:text="Name ......" android:textColor="@color/colorPrimaryDark" android:textSize="16sp" android:textStyle="bold" /> <Button android:id="@+id/nameButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Name" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="2dip" android:text="Description" android:textColor="@color/colorAccent" /> <Button android:id="@+id/descriptionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Description" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/release_at" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Release at" android:textColor="#5d5d5d" android:textStyle="bold" /> <Button android:id="@+id/releaseButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" Release" /> </LinearLayout>以确保DOM不会进行不必要的更改非常重要。所以，你需要建立一个字符串，然后像这样注入一次：

.append()

Answer 3

每个数组都有.map方法，所以对我来说最有效的方法是这样的：

$('.cart-productDetailOptions ul').append(data['productDetailOptions'].map( item => "<li>"+item+"</li>" ) );

注意：我正在使用ES6箭头功能。哪个有它的等价物：

$('.cart-productDetailOptions ul')
    .append( data['productDetailOptions'].map( function(item) { 
        return "<li>"+item+"</li>" 
    } ) );

注2：感谢@Dora的评论。实际上$(..).append accepts both Array and string，所以.join是不必要的。

Answer 4

如果你没有在其他地方使用data['productDetailOptions']，你可以直接在数组中写<li>your content</li>。像

data['productDetailOptions'] = ['<li>red</li>', '<li>blue</li>' /* ... */ ];

Answer 5

您也可以使用Array.reduce。

$('.cart-productDetailOptions ul')
    .append( data['productDetailOptions'].reduce( function(result, item) { 
        return result + "<li>" + item + "</li>" 
    }, "" ) );

对我而言，它具有更好的可读性，.reduce非常good support

使用append将标记添加到数组中的最佳做法是什么？ jQuery的

5 个答案: