使用 jquery 反转名字和姓氏

Reversing first and last names using jquery

本文关键字：jquery 使用      更新时间：2023-09-26

尝试获取此表并获取名称，当我单击一个单选按钮时，它将名称从类似以下内容更改为：Tom Hanks to Hanks，Tom。这是 html： 

<h1>Address Book</h1>
Show Names as:
<input name="change_last_first" value="last" type="radio">First, Last
<input name="change_last_first" value="first" type="radio">Last, First
<div>
    <table <thead="">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </tbod
        <tbody>
            <tr>
                <td>9001</td>
                <td class="name">Tom Hanks</td>
                <td>tomhanks@moviestars.com</td>
            </tr>
            <tr>
                <td>9002</td>
                <td class="name">Bruce Willis</td>
                <td>brucewillis@moviestars.com</td>
            </tr>
            <tr>
                <td>9003</td>
                <td class="name">Jim Carrey</td>
                <td>jimcarrey@moviestars.com</td>
            </tr>
            <tr>
                <td>9004</td>
                <td class="name">Tom Cruise</td>
                <td>tomcruise@moviestars.com</td>
            </tr>
            <script>
            </script>
        </tbody>
    </table>
</div>
<meta charset="utf-8">
<title>Interview Test</title>
<link rel="stylesheet" href="./webassets/style.css" media="screen" type="text/css">
    <h1>Company Staff List</h1>
<div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>9001</td>
                <td>Tom Hanks</td>
            </tr>
            <tr>
                <td>9002</td>
                <td>Bruce Willis</td>
            </tr>
            <tr>
                <td>9003</td>
                <td>Jim Carrey</td>
            </tr>
            <tr>
                <td>9004</td>
                <td>Tom Cruise</td>
            </tr>
        </tbody>
    </table>
</div>

这是jquery，这是我能想到的全部内容，根本不起作用。 :(

$(document).ready(function () {
    $("input[name='change_last_first']").click(function () {
        $(".name").text(function() {
            $(this).split(" ").reverse();
            });
        });
    });
});
你需要

return结果。另外，由于您使用的是函数 arg 语法text因此对当前文本使用该函数的第二个参数。

    $(".name").text(function(_, cur) {
         return curText.split(/'s+|,/).reverse();
    });

小提琴

假设名称的一般格式是 First Last 或 Last, First，另一种简单的处理方法：

 $("input[name='change_last_first']").change(function () {
        var arr = [" ", ","],
            sep = this.value === 'first' ? 0 : 1;
        $(".name").text(function (_, curText) {
            return curText.split(arr[sep % 2]).reverse().join(arr[(sep + 1) % 2]);
        });
    });

演示

为此，

您需要split带空格的全名，然后可以使用reverse()。

注意：因为reverse()是数组实例的方法。它不会直接在字符串上工作。您应该首先将字符串的字符拆分为一个数组，反转数组，然后再重新连接成一个字符串。

$("input[name='change_last_first']").click(function () {
      $(".name").each(function() {            
          var revName = $(this).text().split(" ").reverse().join(" ");
          $(this).text(revName);
      });
});

试试这个

相关文章：