Question

我有一个嵌套的无序列表，我必须使用jQuery将其转换为表。我设法替换了以下内容：

UL->桌子

LI-> TD

但是现在我必须搜索并替换'|' '</td><td>的字符。但是我不知道该怎么办。

$('.wd-widget > ul > li > ul > li > ul > li').each( function() {
    $(this).replaceWith( function() {
        return $('<tr><td>' + this.innerHTML + '</td></tr>');
    });
});

$('.wd-widget > ul > li > ul > li > ul').each( function() {
    $(this).replaceWith( function() {
        return $('<table>' + this.innerHTML + '</table>')
    })
});

table {
  border: 1px solid red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wd-widget">
  <ul>    
    <li><a href="#">label</a>
      <ul>
   	    <li><a href="#">13:30 - 14:15|13:30 - 14:15</a>
          <ul>
         	<li>2018|september|inschrijven</li>
         	<li>2019|mei|inschrijven</li>
         	<li>2020|januari|inschrijven</li>
         	<li>2020|augustus-september|inschrijven</li>
          </ul>
        </li>
      </ul>
    </li>
   </ul>
 </div>

Answer 1

您可以使用reg exp替换管道，例如：

$('.wd-widget > ul > li > ul > li > ul > li').each( function() {
    $(this).replaceWith( function() {
        return $('<tr><td>' + this.innerText.replace(/\|/g, '###') + '</td></tr>');
    });
});

$('.wd-widget > ul > li > ul > li > ul').each( function() {
    $(this).replaceWith( function() {
        return $('<table>' + this.innerHTML + '</table>')
    })
});

table {
  border: 1px solid red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wd-widget">
  <ul>    
    <li><a href="#">label</a>
      <ul>
   	    <li><a href="#">13:30 - 14:15|13:30 - 14:15</a>
          <ul>
         	<li>2018|september|inschrijven</li>
         	<li>2019|mei|inschrijven</li>
         	<li>2020|januari|inschrijven</li>
         	<li>2020|augustus-september|inschrijven</li>
          </ul>
        </li>
      </ul>
    </li>
   </ul>
 </div>

Answer 2

发布此问题后几分钟，我想到了这个想法。：/

$('.wd-widget td').each( function() {
  $(this).replaceWith( function() {
     var newInnerHTML = this.innerHTML.replace(/\|/g, "</td><td>");
     return $('<td>' + newInnerHTML + '</td>');
  });
});

它有效。 :)这样，我将所有管道字符都转换为单独的表单元格。

Answer 3

我不会取代。我会根据您的分隔符拆分内容并从那里开始

$('.wd-widget > ul > li > ul > li > ul').each( function() {
    $(this).replaceWith( function() {
        var rows =  ""
        $(this).find("li").each(function(){
                      var cells = "<td>" + $(this).html().split("|").join("</td><td>") + "</td>";
                      rows +="<tr>" + cells + "</tr>";
        });
        
        console.log(rows);
        return $('<table>' + rows + '</table>')
    })
});

table {
  border: 1px solid red;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wd-widget">
  <ul>    
    <li><a href="#">label</a>
      <ul>
   	    <li><a href="#">13:30 - 14:15|13:30 - 14:15</a>
          <ul>
         	<li>2018|september|inschrijven</li>
         	<li>2019|mei|inschrijven</li>
         	<li>2020|januari|inschrijven</li>
         	<li>2020|augustus-september|inschrijven</li>
          </ul>
        </li>
      </ul>
    </li>
   </ul>
 </div>

在jQuery中将管道字符替换为''

3 个答案: