Question

我制作了一个简单的jQuery函数来修剪文本。我这样触发：

// JS
function truncate() {

   <! – Stuff to do -->

}
truncate();


// ...    


// HTML
<div class="Truncate" data-words="60">

    <! – Text to Trim -->

</div>

问题是每次我加载一个没有DIV且其上有“Truncate”类的页面时，该函数会给我一个错误。

所以我只想在<div>出现时触发它。实际上我希望<div>本身触发函数。

我知道我可以将它包装在IF语句中检查类，但我想知道是否使用jQuery我可以通过选择器调用它，如：

$('.Truncate').myfunctionName() {
   my stuff
};

这是一种创造性的语法，只是为了让你理解。

...提前致谢。

Answer 1

简单回答如果我做对了。

＆＃13;

function doStuff(elements) {
  console.log('doing stuff...');
}

$(function() {
  var truncates = $('.Truncate');

  if (truncates.length) { // here you validate if there is any element with that class
    doStuff(truncates);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Truncate"></div>

＆＃13;

Answer 2

这是一个带有IFEE功能的js代码：

＆＃13;

(function(){
 var elmTranc=document.getElementsByClassName('Truncate');
  if(elmTranc){
    for(var i=0;i<elmTranc.length;i++){     
      elmTranc[i].innerHTML.trim();
    }
  }
})();

＆＃13;

Answer 3

使用querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

的另一个简单解决方案

if(document.querySelector(".Truncate")){ //if element with .Truncate exists
  truncate();
}

Answer 4

您可以创建一个迷你jquery插件：

＆＃13;

// include jquery first

$.fn.truncate = function() {
  return $(this).each(function() {
    $(this).text($(this).text().substr(0, 2));
  });
};

$(".truncate").truncate()
$(".someotherclass").truncate();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='truncate'>Abc</div>
<div class='truncate'>Xyz</div>
<div class='notruncate'>123</div>

＆＃13;

Answer 5

我最终做到了这一点......

if( $('.Truncate').length ) {
    (function() {
        suff
    })();
}

可以吗？

仅当存在CSS类时才运行jQuery函数

5 个答案: