javascript - 迭代 jQuery 中的元组列表，将 HTML 应用于元组元素

Question

我有一个隐藏的 div，其中包含一个元组列表，如下所示:

<div id="own_tiles_tuple" style="display: none;">[('Y', '4'), ('A', '1'), ('T', '1'), ('I', '1'), ('C', '3'), ('K', '5')]</div>

我正在尝试遍历 own_tile_tuple 的值并用一些 HTML 样式包装它，如下所示:

'<span class="scrabble-tile__letter">' + letter + '<span class="scrabble-tile__number">' + number + '</span>'<span/>'

在给定元组中的位置 - 例如(Y, 4)，第一个值是“字母”，第二个值是“数字”。所以我希望所有这些 span 标签的整个结果 HTML 相互堆叠。

我试过这样的:

var test = jQuery.map($('#own_tiles_tuple').text(), function(letter_tuple) {
    return '<span class="scrabble-tile__letter">' + letter_tuple[0] + '<span class="scrabble-tile__number">' + letter_tuple[1] + '</span>'<span/>'
});

但我似乎无法让它正常工作

Answer 1

正则表达式来拯救!

const res = [...$('#own_tiles_tuple').text().matchAll(/\('(\w)',\s*'(\d)'\)/g)]
  .map(matches => `<span class="scrabble-tile__letter">${matches[1]}<span class="scrabble-tile__number">${matches[2]}</span></span>`);

$('#result').html(res);

#result > span.scrabble-tile__letter {
  display: inline-block;
  border: 1px solid;
  width: 3rem;
  height: 3rem;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 3rem;
  position: relative;
  margin: 0 .5rem 0 0;
  box-shadow: .1rem .1rem .1rem rgba(0,0,0,.5);
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;;
  user-select: none;
}

#result > span.scrabble-tile__letter:hover {
  transform: translate3d(0, .05rem, 0) scale(1.04) rotate(3deg);
  box-shadow: .2rem .2rem .2rem rgba(0,0,0,.5);
}

#result > span.scrabble-tile__letter:nth-child(odd):hover {
  transform: translate3d(0, .05rem, 0) scale(1.04) rotate(-3deg);  
}

#result > span.scrabble-tile__letter:nth-child(3n+0):hover {
  transform: translate3d(0, .05rem, 0) scale(1.04) rotate(-8deg);  
}


#result > span.scrabble-tile__letter > span.scrabble-tile__number {
  position: absolute;
  bottom: .2rem;
  right: .15rem;
  font-size: .75rem;
  line-height: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="own_tiles_tuple" style="display: none;">[('Y', '4'), ('A', '1'), ('T', '1'), ('I', '1'), ('C', '3'), ('K', '5')]</div>

<div id="result"></div>

基于 JSON 的解决方案 as suggested by Rory McCrossan可能看起来像这样:

const res = JSON.parse($('#own_tiles_tuple').text())
  .map(x => `<span class="scrabble-tile__letter">${x.letter}<span class="scrabble-tile__number">${x.number}</span></span>`);

$('#result').html(res);

#result > span.scrabble-tile__letter {
  display: inline-block;
  border: 1px solid;
  width: 3rem;
  height: 3rem;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 3rem;
  position: relative;
  margin: 0 .5rem 0 0;
  box-shadow: .1rem .1rem .1rem rgba(0,0,0,.5);
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;;
  user-select: none;
}

#result > span.scrabble-tile__letter:hover {
  transform: translate3d(0, .05rem, 0) scale(1.04) rotate(3deg);
  box-shadow: .2rem .2rem .2rem rgba(0,0,0,.5);
}

#result > span.scrabble-tile__letter:nth-child(odd):hover {
  transform: translate3d(0, .05rem, 0) scale(1.04) rotate(-3deg);  
}

#result > span.scrabble-tile__letter:nth-child(3n+0):hover {
  transform: translate3d(0, .05rem, 0) scale(1.04) rotate(-8deg);  
}


#result > span.scrabble-tile__letter > span.scrabble-tile__number {
  position: absolute;
  bottom: .2rem;
  right: .15rem;
  font-size: .75rem;
  line-height: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="own_tiles_tuple" style="display: none;">[{ "letter": "J", "number": "8" }, { "letter": "S", "number": "1" }, { "letter": "O", "number": "1" }, { "letter": "N", "number": "1" }]</div>

<div id="result"></div>