是否可以获取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>
答案 0 :(得分:3)
使用此:
$(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;
答案 1 :(得分:3)
您可以使用text
方法获取每个innerText
元素的li
,然后您可以用第一个字母替换它。
使用trim
,就像文本包含前导空格一样,将显示空格。
要获取每个单词的第一个字母,可以按空格分割,映射然后使用子字符串方法获取第一个字母。最后,返回的数组可以通过空格连接来连接数组元素。
$('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;
答案 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版本,就在下面:
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;
答案 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,仅包括第一个字母