javascript - 使用 Jquery 获取 "."之后的文本

Question

我有一个这样的列表

<ul class="example">
    <li>
        <span class="type"></span>
        <a href="#">New document.txt</a>
    </li>
    <li>
        <span class="type"></span>
        <a href="#">Another document.zip</a>
    </li>
</ul>

如何获取“.”后的文字？并插入“类型”？结果应该是这样的

<ul class="example">
    <li>
        <span class="type">txt</span>
        <a href="#">New document.txt</a>
    </li>
    <li>
        <span class="type">zip</span>
        <a href="#">Another document.zip</a>
    </li>
</ul>

Answer 1

遍历 span 并使用相邻兄弟中点 (.) 之后的文本更新文本内容。

// use text method with callback to iterate and update 
// based on the returned value
$('.example .type').text(function() {
  return $(this)
    // get the a tag
    .next()
    // get text content
    .text()
    // split the text
    .split('.')
    // get the last element from array
    .pop();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="example">
  <li>
    <span class="type"></span>
    <a href="#">New document.txt</a>
  </li>
  <li>
    <span class="type"></span>
    <a href="#">Another document.zip</a>
  </li>
</ul>