Question

我的HTML页面中有这个div：

<div id="" class="ellipsize-text">
   <h4>Sherlock</h4>
   <span>S2:E2</span>
   <span>The Hounds of Baskerville</span>
</div>

我想收获完整的标题并最终得到：

Sherlock S2：E2巴斯克维尔的猎犬

我对此的第一次尝试是打电话给$(".video-title").first()[0].innerText，这会产生 SherlockS2：E2的巴斯克维尔猎犬。注意如何将段填充在一起而没有空格。然后我尝试遍历孩子并解析出来，但我必须做错事，似乎无法正确遍历它。

获得内部html（使用jQuery）产生所需结果的最有效方式（或至少最简单）是什么？

Answer 1

要为每个 div使用给定的类（HTML中为ellipsize-text）执行此操作：

$(".ellipsize-text").each(function() {
  console.log($(this).children().map(function() {
    return $(this).text();
  }).get().join(" "));
});

我们使用children获取div的所有子项，然后map获取文本，get获取数组（而不是jQuery对象），和join(" ")将它们与空格一起添加。

实时复制：

＆＃13;

$(".ellipsize-text").each(function() {
  console.log($(this).children().map(function() {
    return $(this).text();
  }).get().join(" "));
});

＆＃13;

<div id="" class="ellipsize-text">
   <h4>Sherlock</h4>
   <span>S2:E2</span>
   <span>The Hounds of Baskerville</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

您可以使用text()方法获取文本内容。或者，如果您需要子元素的空格分隔文本内容，则迭代子节点并生成内容。

＆＃13;

console.log(
  $('.ellipsize-text').text().trim()
)

// or with space

console.log(
  $('.ellipsize-text')
  // get all child nodes
  .contents()
  // iterate over the child nodes
  .map(function() {
    // return the text content of the element
    return $(this).text().trim();
  })
  // get the result as an array from the jQuery object
  .get()
  // join the array strings with a single space
  .join(' ')
)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="" class="ellipsize-text">
  <h4>Sherlock</h4>
  <span>S2:E2</span>
  <span>The Hounds of Baskerville</span>
</div>

＆＃13;

如何连接子元素值并包含空格？

2 个答案: