jQuery - How to check if input is there?

Question

Simple task here, but I can't get it right: If a table-cell is clicked, I need to check whether it contains an input field or not. If it's not there, a new one should be created.

So far I got this:

$("tbody td").bind("click", function(){
  $this = $(this);
  var newInput = $(document.createElement("input")).attr("class", "input-small");
  $this.append(newInput);
})

This works, but as you can see, it misses the test if an input is already there. I already tried various methods including if($this.text.length){...}, if($this.val().hasClass("input-small") == true){...} but they all fail. So how do I do it right? Whats the right way to check if the clicked cell contains an input field?

Russ Cam · Accepted Answer · 2012-08-03 10:19:36Z

11

Something like the following will work

if ($this.find('input').length) { 
    // the td clicked contains an <input>
}

$this is a jQuery object that wraps the current <td> element (referenced by this), so we need to look into this element in the DOM to see if it contains an <input> element. If it does, the .length property will be greater than 0 and thus a truthy value.

answered Aug 3, 2012 at 10:19

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PhonicUK · Accepted Answer · 2012-08-03 10:21:36Z

1

if ($(this).children("input").length == 0) //the cell doesn't contain any input elements.

answered Aug 3, 2012 at 10:21

PhonicUK

13.9k4 gold badges47 silver badges65 bronze badges

Comments

ninja · Accepted Answer · 2012-08-03 10:55:17Z

1

Russ Cam has the answer for you (upvote him!), I just wanted to help you optimize the code some what.

// .click just points to jquerys .on function, so calling it directly is faster.
$('tbody td').on('click', function() {
     // always declare your variables properly, some javascript engines could have issues, however excellent that you are caching $(this)
     var $this = $(this),
         newInput = $('<input class="input-small"');

     // .lenght will return false if the length is 0, so no need to compare it to an int
     if(!$this.find('input').length) {
         newInput.appendTo($this);
     }
});

edit: fixed logic

edited Aug 3, 2012 at 10:55

answered Aug 3, 2012 at 10:27

ninja

2,2831 gold badge15 silver badges16 bronze badges

3 Comments

Sven Over a year ago

Thanks for the commented code! After fixing newInput to $('<input type="text" class="input-small">'); it nearly worked. Problem is I had to do it like if($this.find('input').length == false) because otherwise it did not work. Any reason for that? (Because what you've written sounds logical to me!)

ninja Over a year ago

Seems very strange, sure there isn't a typo somewhere? I made a fidde here jsfiddle.net/LxHK9 , where you can see it in action. Oh nevermind, its the logic in my code that's wrong, it should be if(!$this.find('input').length) as it is now it checks if its there, and then appends it. Not the other way around.

Sven Over a year ago

haha yeah, seems to be a logical error on my side! if($this.find('input').length){...} - this means an input is there. So if I put newInput.appendTo($this); it's basically senseless for my purpose. But with if-else it works like a charm! :)

Faust · Accepted Answer · 2012-08-03 10:20:54Z

0

Try:

if($(this).find('input').length > 0){

    var newInput = $(document.createElement("input")).attr("class", "input-small");
      $this.append(newInput);
}

answered Aug 3, 2012 at 10:20

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Collectives™ on Stack Overflow

jQuery - How to check if input is there?

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related