Question

我试图从Jquery中调用HTML中的text字段。我没有运气就尝试了很多场景。这是最后一次尝试我也搜索过Jquery网站，但我可以找到可以做到这一点的属性/方法。

＆＃13;

$('.cjmp-drag-element-content').on("click", function(event){
    var title = $(".cjmp-drag-element-content span:last").text(event.target.tagName);
  	$(title).substring(0, 10);
    });

＆＃13;

<div class="cjmp-drag-element-content cjmp-optional cjmp-choosen">
<span class="cjm-score-value" style="background-color: #D8D8D8;">0.0</span>
<span class="cjmp-content-visitors" id="cjmpc-visitors-181">100%</span>
<span style="display: inline-block; line-height: 220%; width: 135px; padding: 2px 4px; height:27px;">cjasdgasga 1</span>
</div>

＆＃13;

最终我试图将HTML标签（cjasdgasga 1）剪切为（cjasd）并在行尾添加三个点。所以这样的事情。（cjasd ......）

Answer 1

这有效：你不能在jquery对象上调用substring，因为它是一个javascript函数

$('.cjmp-drag-element-content').on("click", function(){
    // get the text from the last child span
    var title = $(".cjmp-drag-element-content span:last-child").text();
    // get a substring of the text
    var newTitle = title.substring(0, 5);
    // replace the current text with the substring and add the dots
    $(".cjmp-drag-element-content span:last-child").text(newTitle + "...");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cjmp-drag-element-content cjmp-optional cjmp-choosen">
<span class="cjm-score-value" style="background-color: #D8D8D8;">0.0</span>
<span class="cjmp-content-visitors" id="cjmpc-visitors-181">100%</span>
<span style="display: inline-block; line-height: 220%; width: 135px; padding: 2px 4px; height:27px;">cjasdgasga 1</span>
</div>

Answer 2

您不需要编写代码，并且在.substring()对象上调用jQuery - 无论如何都被错误选择 - 将无法满足您的期望。

这可以解决您的问题：

$(function() {
  $('.cjmp-drag-element-content').on('click', function() {
    var el = $(this).find("span:last");
    el.text(el.text().substring(0, 10));
  });
});

Demo

带有Jquery和HTML的子跨度标记

2 个答案: