Question

我在Id中使用jQuery中的div选择器。 tbody与<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'/>的情况有所不同。这是一个更大的问题 - 为了清楚起见，这是我原始问题的简化版本

HTML

$(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());
});

JS

tbody

小提琴：Rene Vogt

我想在输入文本框中显示原始html，但只显示div个而不是filter。如果我使用find方法代替{{1}} - 它https://jsfiddle.net/bragboy/Lt8nua10/1/代表div而不是tbody。

我的目标是为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查找后代元素，但#iamdiv是allcontents jQuery对象中的顶级条目。
< / LI>
~~您正在重复~~
中的元素
var allcontent = $($('body').html());

~~这一行，我相当确定你不想做什么。~~ （你已经说过＆＃39; s故意模拟从其他地方解析HTML。）

您已经说过，您的目标是在两个用例中使用find（而不是在一个用户中使用filter而在另一个用户中使用find）。要做到这一点，您需要将其他内容作为allcontent的根。

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

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

行，即使只是

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

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

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

实例：

＆＃13;

$(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());
});

＆＃13;

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

＆＃13;

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

2 个答案: