CODEWITHSUNDEEP
jqueryhtml
Sean
Sean

Reputation: 23

JQuery: height is not a function

I'm trying to have a simple JQuery function where I enter a class name (of paragraph elements), enter a maximum height, and clamp the height of the paragraph with ellipses at the end. (using this method, essentially). However, I get the error:

Caught TypeError: toClamp.height is not a function

Following is my code. Any ideas?

function clamp(cl, height){
  var clamps = $(cl);
  for (var i = 0; i < clamps.length; i++) {
    var toClamp = clamps[i];
    while (toClamp.height() > height) {
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  }
}

$(window).load(function() {
  clamp('.clamp64', 64);
  clamp('.clamp106', 106)
})

Upvotes: 1

Views: 4292

Answers (5)

GG.
GG.

Reputation: 21844

You are calling a jQuery method (.height()) on a DOM element (clamps[i]). It's the issue.

There are several ways to solve your problem.

My recommendation: cleaner loop with .each + access to the current element with $(this)

function clamp(cl, height){
  var clamps = $(cl);
  clamps.each(function () { // Iterate on jQuery objects
    var toClamp = $(this);  // Keep a reference of the current jQuery object
    while (toClamp.height() > height) {
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  });
}

Similar to your approach, with .eq(index) instead of [index]

function clamp(cl, height){
  var clamps = $(cl);
  for (var i = 0; i < clamps.length; i++) {
    var toClamp = clamps.eq(i); // get the n jQuery object
    while (toClamp.height() > height) {
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  }
}

Another one, but redundant in my opinion (recommended by the other answers)

function clamp(cl, height){
  var clamps = $(cl);
  for (var i = 0; i < clamps.length; i++) {
    var toClamp = clamps[i];
    while ($(toClamp).height() > height) { // convert (again) a DOM element into a jQuery object
        toClamp.text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  }
}

Upvotes: 1

Adjit
Adjit

Reputation: 10305

The issue here is that you are trying to call a jQuery function on what your browser thinks is a JavaScript object. So, in order for it to work, toClamp needs to somehow tell your program that it is a jQuery object.

Try:

$(toClamp).height();

You will also encounter this same error on the next line of code calling .text()

change that to:

$(toClamp).text(...)

Alternatively

Since you are using jQuery you can just use the .each() function to simplify things a little bit.

function clamp(cl, height){
  var clamps = $(cl);
  $(clamps).each(function(){
    while($(this).height() > height) {
      $(this).text(function (index, text){
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  });
}

The this keyword here, replaces toClamps

Upvotes: 6

Abraxas
Abraxas

Reputation: 374

I am at work so I can't go too into this right now but I believe yourerror is coming from your logic in the while loop.

here:

while(toClamp.height() > height) ...

You're saying that toClamp has it's on height function but you haven't actually made the function.

If you don't want to have a height function; -- you could, but that's up to you; would it not be possible to do something like

this:

function clamp(cl, h1){
var clamps = $(cl);
var height = $(h1);
for (var i = 0; i < clamps.length; i++) {
var toClamp = clamps[i];
while (toClamp.h1 > height) {
    toClamp.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
     });
    }
  }
}

$(window).load(function() {
clamp('.clamp64', 64);
clamp('.clamp106', 106)`enter code here`
})

This is not tested as of yet but I will look into it further when I get home.

Upvotes: 0

Przemysław Melnarowicz
Przemysław Melnarowicz

Reputation: 1057

Have you tried with:

var toClamp = $(clamps[i]);

?

You probably operate jQuery functions on non-jQuery object.

Upvotes: 0

Sanchit
Sanchit

Reputation: 541

Try using toClamp.height instead od toClamp.height(). height is actually not a function, but its a property or an attribute to the element. Therefore there is no need to use the ().

Upvotes: 0

Related Questions