Question

我的代码有效，但它并不简洁，而且有很多重复。寻找更有知识的人来帮助我清理它，这样我就可以用更少的代码做同样的事情并在此过程中学习。

我开始在我的页面上为每个循环元素（总共5个）：

<div class="rec-topics">[Topic One, Topic Two, Topic Three]</div>

我需要使用jQuery删除括号和逗号，然后将其包装在无序列表中，每个列表都是自己的列表项。这样我就可以通过CSS为客户设置样式。

这里是我编写的代码（有效），但我知道有很多重复，而且可以更清晰。

//Add unique class to each loop element
$('.rec-topics').each(function(i){
  $(this).addClass('postlist' + (i+1));
});

//Create a variable for each unique class on each loop iteration
var div = $('.postlist1');
var div2 = $('.postlist2');
var div3 = $('.postlist3');
var div4 = $('.postlist4');
var div5 = $('.postlist5');

//Post Items - remove braket on left
div.html(div.html().replace(/\[/g, ''));
div2.html(div2.html().replace(/\[/g, ''));
div3.html(div3.html().replace(/\[/g, ''));
div4.html(div4.html().replace(/\[/g, ''));
div5.html(div5.html().replace(/\[/g, ''));

//Post Items - remove braket on right
div.html(div.html().replace(/\]/g, ''));
div2.html(div2.html().replace(/\]/g, ''));
div3.html(div3.html().replace(/\]/g, ''));
div4.html(div4.html().replace(/\]/g, ''));
div5.html(div5.html().replace(/\]/g, ''));

//Post Item 1 - split each element with commas to create an array. Map array and create unordered list.
var values = div.html().split(',');
div.html('<ul>' + $.map(values, function(v) { 
  return '<li>' + v + '</li>';
}).join('') + '</ul>');

//Post Item 2 - split each element with commas to create an array. Map array and create unordered list.
var values = div2.html().split(',');
div2.html('<ul>' + $.map(values, function(v) { 
  return '<li>' + v + '</li>';
}).join('') + '</ul>');

//Post Item 3 - split each element with commas to create an array. Map array and create unordered list.
var values = div3.html().split(',');
div3.html('<ul>' + $.map(values, function(v) { 
  return '<li>' + v + '</li>';
}).join('') + '</ul>');

//Post Item 4 - split each element with commas to create an array. Map array and create unordered list.
var values = div4.html().split(',');
div4.html('<ul>' + $.map(values, function(v) { 
  return '<li>' + v + '</li>';
}).join('') + '</ul>');

//Post Item 5 - split each element with commas to create an array. Map array and create unordered list.
var values = div5.html().split(',');
div5.html('<ul>' + $.map(values, function(v) { 
  return '<li>' + v + '</li>';
}).join('') + '</ul>');

Answer 1

迭代所有具有相同类的元素。

您不需要对.replace()进行两次单独调用，只需一次调用即可删除初始[和尾随]。

$(".rec-topics").html(function(i, oldHtml) {
  var items = oldHtml.replace(/^\[|\]$/g, '').split(',');
  return '<ul>' + $.map(items, function(value) {
    return '<li>' + value + '</li>';
  }).join('') + '</ul>';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rec-topics">[Topic One, Topic Two, Topic Three]</div>
<div class="rec-topics">[Topic Four, Topic Five, Topic Six]</div>

需要帮助清理！ Jquery遍历循环，添加唯一类，映射数组

1 个答案: