Question

好的人很简单我只是不理解某事！

基本上，我在ID元素中输入了一定数量的字符后创建了一个自动JavaScript Ellipses。

它正在工作，但仅适用于其中一个，我希望它能够用于所有12个跨度，就像第一个工作方式一样。

var myid=document.getElementById('title');
myid.innerHTML=myid.innerHTML.substring(0,10)+'...';

感谢您提供任何帮助！

Answer 1

使用document.getElementsByTagName（＆＃34; SPAN＆＃34;）代替document.getElementsById将子字符串应用于所有跨度和getexpected结果

var myid=document.getElementsByTagName("SPAN")
for(var i=0;i<myid.length;i++){
myid[i].innerHTML=myid[i].innerHTML.substring(0,10)+'...';
}

https://jsfiddle.net/Nagasai_Aytha/86463ggt/1/

Answer 2

ID应该是唯一的。您可以在此处使用两条路径。您可以向所有元素添加一个类以通过（首选）选择它们，或者您可以使用现有标记对所有匹配元素进行全面选择。

这是我对第一个解决方案的看法：

// Define the function that'll do the truncating
function addEllipses(el, len) {
  var html = el.innerHTML;
  if (html.length > len) el.innerHTML = html.substring(0, len) + '...';
}

// Select all elements that are supposed to get truncated
var targets = document.getElementsByClassName('ellipses');

var i;

// Call our function on each target
for (i = 0; i < targets.length; i += 1) {
  addEllipses(targets[i], 10);
}

<div class="row">
  <div class="col-md-3">
    <span id="title" class="ellipses">The dog took a walk over the dange...</span>
  </div>
  <div class="col-md-3">
    <span id="title2" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title3" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title4" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title5" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title6" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title7" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title8" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title9" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title10" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title11" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title12" class="ellipses">It is not working for this one :(</span>
  </div>
</div>

此代码允许您告诉函数您要截断的长度（在您的情况下为10）。

如果您在页面上运行此代码，则可以将ellipses类添加到要截断的任何元素中。

这是jquery版本，因为你在问题上有这个标记：

// Define the function that'll do the truncating
function addEllipses($el, len) {
  var html = $el.html();
  if (html.length > len) $el.html(html.substring(0, len) + '...');
}

// Select all elements that are supposed to get truncated
var $targets = $('.ellipses');

// Use map to loop through all elements and call our function on them
$targets.map(function (i) { addEllipses($targets.eq(i), 10); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <span id="title" class="ellipses">The dog took a walk over the dange...</span>
  </div>
  <div class="col-md-3">
    <span id="title2" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title3" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title4" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title5" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title6" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title7" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title8" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title9" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title10" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title11" class="ellipses">It is not working for this one :(</span>
  </div>
  <div class="col-md-3">
    <span id="title12" class="ellipses">It is not working for this one :(</span>
  </div>
</div>

简单的JavaScript省略号（...）

2 个答案: