jquery - 使用jQuery清理数据，将数字包装在<dd>中，并将文本包装在<dt>中

我能够将长字符串转换为dl列表，如下所示：

 <div class="classA">
   <dl id="idA"> Display # 252215425:  </dl>
   <dl id="idB">3 Apples   </dl>
   <dl id="idC">3 Peaches   </dl>
   <dl id="idD">10 Seadless Watermelons   </dl>
   <dl id="idE">23 Bananas </dl>
 </div>

我想要的结果是：

 <div class="classA">
   <dl id="idA">
       <dd>252215425</dd>
       <dt>Display #</dt>
   </dl>

   <dl id="idB">
       <dd>3</dd>
       <dt>Apples</dt>
   </dl>

   <dl id="idC">
       <dd>3</dd>
       <dt>Peaches</dt>
   </dl>

   <dl id="idD">
       <dd>10</dd>
       <dt>Seadless Watermelons</dt>
   </dl>

   <dl id="idE">
       <dd>23</dd>
       <dt>Bananas</dt>
   </dl>
 </div>

我正在努力实现的目标：
1.将每个dl内容分成一个数组
2.查找数字并将其保存在“ n”中
3.查找文本并将其保存在“ w”中
4.用“ dd”标签包装“ n”
5.用“ dt”标签包装“ w”
6.“ n”和“ w”不应有前导和尾随空格

这是我提出的代码，但是没有用...

$("div.classA dl").each(function(){
      var a = $("div.classA dl").html();
      a = a.split(' ');
      var n = a.match(/d+/);
      var w = a.match(/D+/);
      $("div.classA dl").text('');
      $("div.classA dl").append('<dd>'n'</dd>');
      $("div.classA dl").append('<dt>'w'</dt>');

});

最佳答案

差不多了，但是代码中有几个小问题：


要匹配数字，请使用\d而不是仅d。 D也是如此，应该是\D。
match返回一个数组，因此您需要访问它的第一个位置以获得匹配的值；
$.each已经遍历所有dl，无需在循环的每次迭代中再次选择它们。只需使用this引用要迭代的元素即可。


这是固定代码和DEMO：

$("div.classA dl").each(function() {
  var $this = $(this);
  var text = $this.text();
  var n = text.match(/\d+/)[0];
  var w = text.match(/\D+/)[0].replace(/^\s*|\s*$/g, '');

  $this.empty();

  $("<dd>").text(n).appendTo($this);
  $("<dt>").text(w).appendTo($this);
});​

关于jquery - 使用jQuery清理数据，将数字包装在<dd>中，并将文本包装在<dt>中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12592666/