Question

这里的简单任务，但我无法做到正确：如果单击一个表格单元格，我需要检查它是否包含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){...}，但它们都失败了。那我该怎么做呢？什么是正确的方法来检查点击的单元格是否包含输入字段？

Answer 1

以下内容将起作用

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

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

Answer 2

Russ Cam为你提供了答案（upvote他！），我只是想帮你优化代码。

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

编辑：固定逻辑

Answer 3

尝试：

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

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

Answer 4

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

jQuery - 如何检查输入是否存在？

4 个答案: