如何在jQuery中联接数组值但设置格式?

本文介绍了如何在jQuery中联接数组值但设置格式?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在Javascript中输入以下内容:["1213381233", "1213551233", "1213551255"]，我需要将它们加入并格式化.看下面的例子:

I have the following input in Javascript: ["1213381233", "1213551233", "1213551255"] and I need to join them and format them. Take a look to the following example:

<div id="segment_form"> <button id="add_condition"> Click me </button> </div>

var data_field = 'asset_locations_name'; var data_condition = 'in'; var data_values = ["1213381233", "1213551233", "1213551255"]; $("#segment_form").on('click', '#add_condition', function() { var li = ''; var has_parenthesis = false; if (data_condition == 'in' || data_condition == 'not in' || data_condition == 'between' || data_condition == 'not between') { has_parenthesis = true; } if (data_values instanceof Array && data_values.length >= 1) { li += '<li data-field="' + data_field + '" data-condition="' + data_condition + '">'; li += data_field + ' ' + data_condition; if (has_parenthesis) { li += '( '; } $.each(data_values, function(index, value) { li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + value + '</span>'; }); if (has_parenthesis) { li += ' )'; } li += '</li>'; } $('body').append(li); });

该想法是具有以下输出:

The idea is to have the following output:

asset_locations_name in (1213381233,1213551233,1213551255)

我的代码几乎可以正常工作，但是我得到了:

My code is almost working but I am getting:

asset_locations_name in( 121338123312135512331213551255 )

这里的诀窍是我不能执行data_values.join()，因为我需要将每个值添加为跨度本身上的data-id属性.

The trick here is I can't do a data_values.join() because I need the value of each to add as a data-id property on the span itself.

还有其他清洁解决方案吗?欢迎任何帮助！

Any other clean solution? Any help is welcome!

我忘了提一个小提琴在这里准备好玩.

I forgot to mention there is a Fiddle here ready to play with.

推荐答案

这怎么办?

var data_field = 'asset_locations_name'; var data_condition = 'in'; var data_values = ["1213381233", "1213551233", "1213551255"]; $("#segment_form").on('click', '#add_condition', function() { var li = ''; var has_parenthesis = false; if (data_condition == 'in' || data_condition == 'not in' || data_condition == 'between' || data_condition == 'not between') { has_parenthesis = true; } if (data_values instanceof Array && data_values.length >= 1) { li += '<li data-field="' + data_field + '" data-condition="' + data_condition + '">'; li += data_field + ' ' + data_condition; if (has_parenthesis) { li += '('; } $.each(data_values, function(index, value) { // Note the 'prefix' variable here var prefix = (index == 0) ? '' : ', '; li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + prefix + value + '</span>'; }); if (has_parenthesis) { li += ')'; } li += '</li>'; } console.log('data_field =>', data_field, 'data_condition => ', data_condition, 'data_values =>', data_values, 'li =>', li); $('body').append(li); });

我使用解决方案创建了新小提琴.

I created a new fiddle with the solution.