javascript - Run jQuery function only if CSS class is present - Stack Overflow

admin管理员组

文章数量:1425717

I made a simple jQuery function that trims text. I trigger it this way:

// JS
function truncate() {

   <! – Stuff to do -->

}
truncate();


// ...    


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

    <! – Text to Trim -->

</div>

The problem is that the function gives me an error every time I load a page that doesn't have a DIV with the class 'Truncate' on it.

So I'd like to trigger it only when that <div> is there. Actually I'd like that the <div> itself triggers the function.

I know I can wrap it in an IF statement checking for the class, but I was wondering if with jQuery I can call it over a selector, something like:

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

That is creative syntax, just to make you understand.

...Thanks in advance.

I made a simple jQuery function that trims text. I trigger it this way:

// JS
function truncate() {

   <! – Stuff to do -->

}
truncate();


// ...    


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

    <! – Text to Trim -->

</div>

The problem is that the function gives me an error every time I load a page that doesn't have a DIV with the class 'Truncate' on it.

So I'd like to trigger it only when that <div> is there. Actually I'd like that the <div> itself triggers the function.

I know I can wrap it in an IF statement checking for the class, but I was wondering if with jQuery I can call it over a selector, something like:

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

That is creative syntax, just to make you understand.

...Thanks in advance.

• javascript
• jquery
• html
• function

Share Improve this question Follow edited Jun 26, 2017 at 18:08 Turnip 36.7k1515 gold badges9191 silver badges117117 bronze badges asked Jun 26, 2017 at 18:04 rolfo85rolfo85 76733 gold badges1414 silver badges2828 bronze badges 6

• How are you currently calling it? What error are you getting? – Mike Cluck Commented Jun 26, 2017 at 18:05
• Sounds like a logic error within truncate. – Kevin B Commented Jun 26, 2017 at 18:06
• Inside I'm doing a bunch of stuff that relies on the class .Truncate But the problem is only caused by the fact that the function is called on every page. Otherwise everything is working fine. I just would like it's called only when that DIV with that class is there – rolfo85 Commented Jun 26, 2017 at 18:06
• 2 $.fn.truncate = truncate, then you can run your example with $('.Truncate').truncate() – Scott Commented Jun 26, 2017 at 18:13
• You should be able to .map (JS native) or .each (Jquery function) to apply your truncate function without the if. Essentially: $('.truncate').map(truncate) I can add some code if this will work? – aduss Commented Jun 26, 2017 at 18:21

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 3

Simple answer If I got it right.

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);
  }
});

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

Here is a js code with an IFEE function:

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

Another simple solution using querySelector https://developer.mozilla/en-US/docs/Web/API/Document/querySelector

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

You can create a mini jquery plugin:

// include jquery first

$.fn.truncate = function() {
  return $(this).each(function() {
    $(this).text($(this).text().substr(0, 2));
  });
};

$(".truncate").truncate()
$(".someotherclass").truncate();

<script src="https://ajax.googleapis./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>

I've done this in the end...

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

Is it ok?

本文标签： javascriptRun jQuery function only if CSS class is presentStack Overflow