Question

是否可以获取li的所有首字母并显示它或替换li的值？我在网上找到了一个示例js，它获取了每个单词的所有首字母，但是我希望它替换它并获得我的li的值。

HTML：

<ul>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Charlie</li>
    <li>Charlie Delta Omega Lima Egg</li>
</ul>

JS：

var text = '';
var arr = "Java Script Object Notation".split(' ');
for(i=0;i<arr.length;i++) {
    text += arr[i].substr(0,1)
}    
alert(text);

输出：

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
<li>CHOLE</li>
    </ul>

Answer 1

使用此：

＆＃13;

$(function () {
  $("li").html(function (i, v) {
    return v.trim().split(" ").map(function (obj) {
      return obj.substr(0, 1);
    }).join("");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>Alpha Beta</li>
  <li>Beta</li>
  <li>Charlie</li>
</ul>

＆＃13;

Answer 2

您可以使用text方法获取每个innerText元素的li，然后您可以用第一个字母替换它。

使用trim，就像文本包含前导空格一样，将显示空格。

要获取每个单词的第一个字母，可以按空格分割，映射然后使用子字符串方法获取第一个字母。最后，返回的数组可以通过空格连接来连接数组元素。

＆＃13;

$('ul li').text(function(i, old) {
  return old.trim().split(/\s+/).map(function(e, i) {
    return e.substr(0, 1);
  }).join('');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li>Alpha Beta</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, pariatur, aperiam! Nesciunt laudantium amet nulla veritatis doloremque voluptate enim fugiat, ad voluptas, dolor non eum quam est eveniet libero consequuntur.</li>
</ul>

＆＃13;

Answer 3

这也是由正则表达式完成的。

$('ul li').text(function(i, old) {
 return old.trim().split(/\s+/).map(function(e, i) {
  return e.match(/\S/i);
 }).join("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Alpha Beta</li>
</ul>

Answer 4

我知道您在问题中标记了jQuery，但只要其他人更喜欢一个普通的Javascript版本，就在下面：

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  [].forEach.call(document.querySelectorAll('ul li'), (item, i) => {
    item.textContent = item.textContent.split(' ').map(x => x.slice(0, 1)).join('');
  });
});

＆＃13;

<ul>
  <li>Alpha</li>
  <li>Beta</li>
  <li>Charlie</li>
  <li>Charlie Delta Omega Lima Egg</li>
</ul>

＆＃13;

Answer 5

要替换li的值，您可以使用.text()。如果您只想要第一个字母，那么请忘记您找到的js并使用trim和.substr：

$("li")
    .text(function(i,txt) { 
        return txt.trim().substr(0,1); 
    })

这将获取所有li s，传递当前文本并通过删除任何空格然后取第一个字母来替换它。

如果你想构建一个问题标题和文字（而不是[原始]例子）隐含的首字母缩略词，那么你可以使用regexp，这取决于你想要如何构建你的首字母缩略词：

$("#leadingspace li").text(function(i,txt) { return txt.match(/\b\w/g).join("") })

$("#caps li").text(function(i,txt) { return txt.match(/[A-Z]/g).join("") })

$("#spacescaps li").text(function(i,txt) { return txt.match(/\b[A-Z]/g).join("") })

$("#firstonly li").text(function(i,txt) { return txt.trim().substr(0,1); })

源

<ul id='leadingspace'>
    <li>JavaScript Object Notification</li>
</ul>

<ul id='caps'>
    <li>JavaScript Object Notification</li>
</ul>

<ul id='spacescaps'>
    <li>Laugh Out really Loud</li>
</ul>

<ul id='firstonly'>
    <li>Alpha Beta</li>
    <li>Beta</li>
</ul>

结果

JON
JSON
LOL
A
B

jsfiddle here，仅包括第一个字母

获取li

5 个答案: