jQuery v1.11.1 .each() 在多级子元素上使用

Question

我需要一种使用 jQuery 或 javascript（首选 jQuery）的方法来运行分类一些滑块描述。

我的问题是当我运行我的函数时，它 returns 每个 .我已经看到一些关于使用 jQuery 索引的事情，类似于 php，但是 jQuery API 页面并没有很好地解释它。

HTML 待运行...

<div class="description">
<div class="hidden">
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
</div>

<div class="">
    <a href="#">consectetur adipiscing elit, Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</a>
</div>

<div class="hidden">
    <a href="#">sed do eiusmod tempor incididunt Lorem ipsum sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua.</a>
</div>

下面是我的javascript.. 假装我正在使用适当的文档就绪功能等...

<script>
jQuery('div.slideshow_panel > div.description > div.hidden > a').each(function(){
var desctext = jQuery('div.slideshow_panel > div.description > div > a').text();
var cuttext = desctext.substr(0,20);

jQuery( this ).append(cuttext +'...');

});


</script>

提前感谢您的建议！

Answer 1

使用this引用当前元素：

jQuery('div.slideshow_panel > div.description > div.hidden > a').each(function(){
var desctext = jQuery(this).text();
var cuttext = desctext.substr(0,20);

jQuery( this ).append(cuttext +'...');

});

Answer 2

使用this关键字引用当前元素，使用.text()替换内容。

jQuery('div.slideshow_panel > div.description > div.hidden > a').each(function(){

    var desctext = jQuery(this).text(); //use 'this' keyword to get current element
    var cuttext = desctext.substr(0,20);

    jQuery(this).text(cuttext +'...'); //use .text instead to replace

});

Answer 3

你不应该append()，而是替换文本。

$(this).text(cuttext + '...');

还有针对此特定任务的更简洁的解决方案，使用方法 $.text() 并将回调作为参数（参见 documentation）。
通过这种方式，您不需要 $.each() 及其主体的开销。

$('div.slideshow_panel > div.description > div.hidden > a').text(function(index, text) {
  return text.substr(0, 20) + '...';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow_panel">
    
    <div class="description">
        
        <div class="hidden">
            <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
        </div>
        <br />
            
        <div class="">
            <a href="#">consectetur adipiscing elit, Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</a>
        </div>
        
        <br />
        <div class="hidden">
            <a href="#">sed do eiusmod tempor incididunt Lorem ipsum sit amet, consectetur adipiscing elit, ut labore et dolore magna aliqua.</a>
        </div>
        
    </div>
        
</div>

jQuery v1.11.1 .each() 在多级子元素上使用

jQuery v1.11.1 .each() use on multi level child elements

each

jquery