简单的JavaScript椭圆（...）

-2

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

它正在工作，但只为其中的一个，我希望它能够适用于所有12个跨度，就像第一个工作正常。

的jsfiddle这里：https://jsfiddle.net/86463ggt/

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

三江源提供任何帮助！

来源

2016-06-23 Thomas farley

ID应该仅在文档中使用一次。如果您多次使用它们，请改用类。另外，如果您想将其应用于多个元素，则应循环遍历结果 –

请在问题中包含所有相关代码，而不是链接到JSFiddle。 – nateyolles

所以你需要选择所有的跨度和循环他们。 – epascarello

相反document.getElementsById的，使用document.getElementsByTagName（ “SPAN”）申请该字符串的所有跨度和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/

来源

2016-06-23 22:53:27

好而简单，但有一个弹出。 –

是@Thomasfarley，我只是保持它的测试..现在删除它:) –

希望这个工程按预期为你:)现在...检查更新小提琴现在https://jsfiddle.net/Nagasai_Aytha/86463ggt/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>

来源

2016-06-23 22:59:53 TheZanke

你是这个人，非常感谢兄弟。 –

简单的JavaScript椭圆（...）

回答

相关问题