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

我在 jQuery by 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());
});

小提琴：https://jsfiddle.net/bragboy/Lt8nua10/1/

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

我的目标是为tbody和div提供一种一致的获取方式。

两个问题：

find查找后代元素，但#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'/>

使用 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' />

相关内容

最新更新

热门标签：