1

这里的任务很简单，但我做错了：如果单击表格单元格，我需要检查它是否包含input字段。如果它不存在，则应创建一个新的。

到目前为止，我得到了这个：

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

这可行，但如您所见，如果输入已经存在，它会错过测试。我已经尝试了各种方法，包括if($this.text.length){...}，if($this.val().hasClass("input-small") == true){...}但都失败了。那么我该怎么做呢？检查单击的单元格是否包含输入字段的正确方法是什么？

4

4 回答 4

11

像下面这样的东西会起作用

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

$this是一个包装当前<td>元素（由 引用this）的 jQuery 对象，因此我们需要在 DOM 中查看该元素以查看它是否包含<input>元素。如果是这样，则该.length属性将大于 0，因此是一个真实值。

于 2012-08-03T10:19:36.673 回答
1

Russ Cam 为您提供了答案（支持他！），我只是想帮助您优化代码。

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

编辑：固定逻辑

于 2012-08-03T10:27:05.257 回答
0

尝试：

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

    var newInput = $(document.createElement("input")).attr("class", "input-small");
      $this.append(newInput);
}
于 2012-08-03T10:20:54.967 回答
0 
if ($(this).children("input").length == 0) //the cell doesn't contain any input elements.
于 2012-08-03T10:21:36.517 回答