文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将数组拆分为无序列表，包括属性和大写文本

问如何将数组拆分为无序列表，包括属性和大写文本
EN

Stack Overflow用户

提问于 2018-01-14 00:10:32

回答 1查看 37关注 0票数 0

我尝试使用现有字符串创建筛选器菜单。我遇到了一个似乎无法修复的简单问题。下面是一个简化的版本：

HTML：

<ul class="filter-nav"></ul>

JS理念：

var $ = jQuery;
var data  = 'phoenix1,phoenix2,phoenix3,phoenix4,phoenix5';
data  = data .split(',');
data .forEach(function (i) { 
    $('.filter-nav').append($('<li class="filter-item"><a href="#">'+i+'').attr('data-uk-filter',i));
});

不幸的是，代码不能按预期工作(没有文本'+i+')：

结果：

<ul class="filter-nav">
    <li class="filter-item" data-filter="phoenix1"><a href="#"></a><li>
    <li class="filter-item" data-filter="phoenix2"><a href="#"></a><li>
    <li class="filter-item" data-filter="phoenix3"><a href="#"></a><li>
    <li class="filter-item" data-filter="phoenix4"><a href="#"></a><li>
    <li class="filter-item" data-filter="phoenix5"><a href="#"></a><li>
</ul>

我遇到的基本问题是将数组拆分为文本和属性"data-filter“或类似的东西。jQuery是可以接受的，我已经尝试了一些使用正则表达式和切片的基本方法，但似乎都没有返回我想要的结果。

最终，我想要的输出将是一个无序的数组列表，包括: data-filter和大写文本"i"，如下所示：

<ul class="filter-nav">
    <li class="filter-item" data-filter="phoenix1"><a href="#">Phoenix1</a><li>
    <li class="filter-item" data-filter="phoenix2"><a href="#">Phoenix2</a><li>
    <li class="filter-item" data-filter="phoenix3"><a href="#">Phoenix3</a><li>
    <li class="filter-item" data-filter="phoenix4"><a href="#">Phoenix4</a><li>
    <li class="filter-item" data-filter="phoenix5"><a href="#">Phoenix5</a><li>
</ul>

有什么想法可以让我做到这一点吗？

string

javascript

jquery

html

arrays

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-14 00:15:16

问题是，您错过了结束的</li>和</a>

它应该是：

$('.filter-nav').append($( '<li class="filter-item"><a href="#">'+i+'</a></li>' ).attr('data-uk-filter',i));

下面是一个代码片段：

$(document).ready(function(){
	var data  = 'phoenix1,phoenix2,phoenix3,phoenix4,phoenix5';
	data  = data .split(',');
	data .forEach(function (i) { 
		$('.filter-nav').append($( '<li class="filter-item"><a href="#">'+i+'</a></li>' ).attr('data-uk-filter',i));
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="filter-nav"></ul>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48241664

复制

相似问题

问如何将数组拆分为无序列表，包括属性和大写文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将数组拆分为无序列表，包括属性和大写文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将数组拆分为无序列表，包括属性和大写文本
EN