javascript - 如何用 jQuery 选择每第 n 个字符的父元素？

Question

我有以下结构:

<div id="container">
<p class="p-one">Some paragraph text. Some paragraph text.</p>
<p class="p-two">Some paragraph text. Some paragraph text.</p>
<p class="p-three">Some paragraph text. Some paragraph text.</p>
<p class="p-four">Some paragraph text. Some paragraph text.</p>
<p class="p-five">Some paragraph text. Some paragraph text.</p>
</div>

使用 jQuery，我希望能够在一定数量的字符之后以编程方式选择父元素(因此在本例中是段落之一)。因此，例如，如果数字是 70，我希望能够计算 #container 中的所有字符，然后找到第 70 个字符并选择该字符所属的元素，在这种情况下将是带有类的段落命名为“p-two”。如果数字是 120，它会做同样的事情，但会选择段落“p-three”。 (我这样做的目的是将一个长容器元素分解成大小大致相等的 block ，其中包含许多不同的元素。)

使用 .length 我可以很好地计算 #container 的字符数，然后在选择父级时遇到麻烦。

Answer 1

您不必将 #container 元素的文本长度作为一个整体来确定，而必须在 p 元素本身上进行。您可以循环执行此操作:

var $children = $('#container').children(),
    $selected,
    limit = 70,
    len = 0;

$children.each(function() {
    len += $(this).text().length;

    if (len > limit) {
        $selected = $(this);
        return false;
    }
});

这里我们有一个 len 变量。 each() 循环遍历 #container 中的每个 p 元素，并增加存储在 len 中的值按该特定 p 元素中包含的文本的长度。如果 len 变得大于我们的限制，我们将我们的 $selected 元素设置为当前迭代元素并跳出循环。

---

演示

var $children = $('#container').children(),
    $selected,
    limit = 70,
    len = 0;

$children.each(function() {
  len += $(this).text().length;

  if (len > limit) {
    $selected = $(this);
    return false;
  }
});

$selected.css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <p class="p-one">Some paragraph text. Some paragraph text.</p>
  <p class="p-two">Some paragraph text. Some paragraph text.</p>
  <p class="p-three">Some paragraph text. Some paragraph text.</p>
  <p class="p-four">Some paragraph text. Some paragraph text.</p>
  <p class="p-five">Some paragraph text. Some paragraph text.</p>
</div>