从特定元素开始获取HTML值

Question

I have this html code

<div id="text">
  <p>Hello</p>
  <p id="selected">How are you?</p>
  <p>Hey</p>
</div>

当我这样做时

$('#text').html()

我将获取这个值：

<p>Hello</p>
<p id="selected">How are you?</p>
<p>Hey</p>

有没有办法获取以id="selected"开头的html值？

示例

我想要做类似于这样的事情：

$('#text').html({from: '#selected'})

结果将会得到：

<p id="selected">How are you?</p>
<p>Hey</p>

- Mike_Device

Answer 1

您可以像以下这样实现：

$("#text #selected").nextAll().addBack().get().map(function(elm){
  return elm.outerHTML;
}).join("");

演示

• nextAll() 会选择所有在当前元素后面的兄弟元素。
• addBack() 会将前一次遍历中的元素添加到当前元素集合中。

- Rajaprabhu Aravindasamy

Answer 2

你可以获取#selected元素及其后面的所有同级元素，并将它们的outerHTML组合起来。

var html = $('#selected').nextAll().addBack().map((i, el) => el.outerHTML).get().join('')


$('<pre/>', {
  text: html
}).appendTo('body')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
  <p>Hello</p>
  <p id="selected">How are you?</p>
  <p>Hey</p>
</div>

- Arun P Johny