javascript - 使用 jQuery 查找最后一个字符

Question

我有一个 HTML 元素，它可以包含纯文本或其他 HTML 元素:

<!-- plain text -->
<div class="content">
  SIMPLE TEXT.
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
  </table>
</div>

<!-- more html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML!</span>
  </div>
</div>

<!-- one more example -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML</span>!
  </div>
</div>

如何在我的 .content div 中向最后一个可打印字符 追加一个 HTML 元素，而不管该字符在哪个 HTML 元素中？

预期结果:

<!-- plain text -->
<div class="content">
  SIMPLE TEXT.<span class="end"></span>
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b<span class="end"></span></td>
    </tr>
  </table>
</div>

<!-- more html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML!<span class="end"></span></span>
  </div>
</div>

<!-- one more example -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML</span>!<span class="end"></span>
  </div>
</div>

Answer 1

这是我解决这个问题的方法，逐行的 JQuery 和后来的代码片段示例。

• 首先循环遍历每个 .content 元素:

  $('.content').each(function(){
  

• 然后将最后一个字符存储在 var 中:

  var ch = $(this).text().trim().slice(-1);
  

• 现在由于有时最后一个字符可能只是在一个 textNode 中而不是在 .content 的子节点中，我们需要区分这种情况，我们可以识别最后一个 nodeText 子元素和实际的 last 元素。

  var lastnode = $(this).contents().last();
  var textnode = $(this).contents().filter(function(){
    return this.nodeType === 3 && $.trim(this.nodeValue) !== '';;
  }).last();
  

• 最后，如果最后一个子节点是一个 textNode，我们只需要append() 元素到 .content 父节点，否则找到最后一个元素 :contains 我们存储的字符并执行 append():

$('.content').each(function(){
  var ch = $(this).text().trim().slice(-1);
  var lastnode = $(this).contents().last();
  var textnode = $(this).contents().filter(function(){
    return this.nodeType === 3 && $.trim(this.nodeValue) !== '';;
  }).last();
  
  if (lastnode[0] == textnode[0]) {
    $(this).append('<span class="end"></span>')
  } else {
    $(this).find(":contains('"+ch+"')").last().append('<span class="end"></span>')
  }
})

.end {
  width: 10px;
  height: 10px;
  margin:0 5px;
  background: purple;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- plain text -->
<div class="content">
  SIMPLE TEXT.
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE<span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>b</td>
      <td>b</td>
    </tr>
  </table>
</div>