jQuery：div 和 tbody 之间的查找行为不一致

Question

我在 jQuery 中按 Id 使用 find 选择器。它在 div 与 tbody 的情况下表现不同。这是一个更大的问题——为了清楚起见，这里是我原来问题的简化版本

HTML

<div id='iamdiv'>HELLO</div>
<table>
  <tbody id='iamtbody'>
    <tr><td>HELLO TOO</td></tr>
  </tbody>
</table>
<input type='text' id='div'/>
<input type='text' id='tbody'/>

JS

$(document).ready(function() {
  var allcontent = $($('body').html()); // I am deliberately doing this to input a HTML String.
  var $divcontent = allcontent.find('#iamdiv');
  $('#div').val($divcontent.html());
  var $tbodycontent = allcontent.find('#iamtbody');
  $('#tbody').val($tbodycontent.html());
});

Fiddle: https://jsfiddle.net/bragboy/Lt8nua10/1/

我想在输入文本框中显示原始 html，但是只显示 tbody 而不是 div。如果我使用 filter 方法而不是 find - 它 works 用于 div 而不是 tbody.

我的 objective 是用一种一致的方式来获取 tbody 和 div。

Answer 1

使用var allcontent = $('body');代替var allcontent = $($('body').html());

$(document).ready(function() {
  var allcontent = $('body');
  var $divcontent = allcontent.find('#iamdiv');
  $('#div').val($divcontent.html());
  var $tbodycontent = allcontent.find('#iamtbody');
  $('#tbody').val($tbodycontent.html());
});

input {
  width: 100%; /* just to show the whole content */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='iamdiv' class='somthing1'>
  HELLO
</div>
<table>
  <tbody id='iamtbody' class='somthing2'>
    <tr>
      <td>HELLO TOO</td>
    </tr>
  </tbody>
</table>
<input type='text' id='div' />
<br/>
<input type='text' id='tbody' />

问题更新后：

您可以使用 .closest() 来实现。因为您在使用 $($(body).html()) 时选择的 cose 在其节点上具有 div。

$(document).ready(function() {
  var allcontent = $($('body').html());
  var $divcontent = allcontent.closest('#iamdiv');
  $('#div').val($divcontent.html());
  var $tbodycontent = allcontent.find('#iamtbody');
  $('#tbody').val($tbodycontent.html());
});

input {
  width: 100%; /* just to show the whole content */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='iamdiv' class='somthing1'>
  HELLO
</div>
<table>
  <tbody id='iamtbody' class='somthing2'>
    <tr>
      <td>HELLO TOO</td>
    </tr>
  </tbody>
</table>
<input type='text' id='div' />
<br/>
<input type='text' id='tbody' />

Answer 2

两个问题：

find 查找 descendant 元素，但 #iamdiv 是您的 allcontents jQuery对象.
~~您正在复制~~
中的元素
var allcontent = $($('body').html());

~~行，我很确定这不是你想做的。~~ （你说这是故意的，模拟解析 HTML 来自其他地方。）

您说过您的目标是在两个用例中都使用 find（而不是在一个用例中使用 filter 而在另一个用例中使用 find）。为此，您需要将其他内容作为 allcontent.

的根目录

您还说过出于某种原因您无法更改

var allcontent = $($('body').html());

行，偶刚到

var allcontent = $("<body>").append($('body').html());

没关系，您仍然可以通过在其后添加一行来添加新的根元素，如下所示：

allcontent = $("<body>").append(allcontent);

实例：

$(document).ready(function() {
  var allcontent = $($("body").html()); // You've said we can't change this
  // The added line:
  allcontent = $("<body>").append(allcontent);
  var $divcontent = allcontent.find('#iamdiv');
  $('#div').val($divcontent.html());
  var $tbodycontent = allcontent.find('#iamtbody');
  $('#tbody').val($tbodycontent.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='iamdiv'>HELLO</div>
<table>
  <tbody id='iamtbody'>
    <tr><td>HELLO TOO</td></tr>
  </tbody>
</table>
<input type='text' id='div'/>
<input type='text' id='tbody'/>

jQuery：div 和 tbody 之间的查找行为不一致

jQuery: Inconsistent behavior of find between div and tbody

html

javascript

css

jquery

selector