获取li

时间:2015-09-23 09:21:20

标签: javascript jquery html

是否可以获取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>

5 个答案:

答案 0 :(得分:3)

使用此:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:3)

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

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

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

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

$('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>

答案 3 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:0)

要替换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,仅包括第一个字母