Javascript 使用函数创建选项卡

我正在尝试创建一个动态创建选项卡的函数。以下是该功能的工作原理：

function create_tabs(array_var, target_element){
  /* array_var will be separated with comma
  /* target_element will be appendning the final data in that elemenet
}

因此，如果我使用上述函数，如下所示：

create_tabs('First, Second, Third', 'any_element_class');

if应该在类为“any_element_class”的元素后面附加以下数据

<ul class='tabs'>
    <li class='tab-link current' data-tab='first'>First</li>
    <li class='tab-link' data-tab='second'>Second</li>
    <li class='tab-link' data-tab='third'>Third</li>
</ul>

<div id='first' class='tab-content current'></div>
<div id='second' class='tab-content'></div>
<div id='third' class='tab-content'></div>

第一个
second
第三

您可以将第一个参数作为数组传递：

var array_var = ['first', 'second','third'];
create_tabs(array_var, '#any_element_class');

然后在函数中对其进行循环：

function create_tabs(array_var, element){
//...loop over array
$(element).append("<li class='tab-link' data-tab='"+array_var[i]+"'>"+array_var[i]+"</li>")
//
}

函数创建选项卡（数组变量，元素）{
//…循环阵列
$（元素）。追加（“
“+array\u var[i]+”
”）
//
}

虽然有点晚了，但还是有另一种方法：

函数创建选项卡（数组变量、目标元素）{
变量数组=数组\变量拆分（“，”）；
$（目标元素）。追加（“”；
$。每个（数组、函数（i）{
$（target_element+'ul'）。追加（“
“+array[i]+”
”）
});
$。每个（数组、函数（i）{
$（目标元素）。追加（“”）；
});
};

问题是什么？为什么不能引用此内容

function create_tabs(array_var, target_element){
var array = array_var.split(", ");
$(target_element).append("<ul class = 'tabs'></ul>");
$.each(array,function(i){
  $(target_element+ ' ul').append("<li class='tab-link' data-tab='"+array[i] +"'>"+  array[i] +"</li>")
});
$.each(array,function(i){
  $(target_element).append("<div id='"+array[i]+"' class='tab-content'></div>");
});
};