修改一半的儿童文件

Question

在这种情况下，我想改变一半孩子的内部html。

普通的javascript或jquery适合我。

＆＃13;

＆＃13;

document.getElementById("cont").children/*only effect the bottom half*/.innerHTML = "Changed";

//jquery also works for me

＆＃13;

<div id="cont">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
</div>

＆＃13;

＆＃13;

＆＃13;

期望的输出：

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>Changed</p>
  <p>Changed</p>
  <p>Changed</p>
  <p>Changed</p>
</div>

Answer 1

如果孩子的数量是固定的，你可以用一个选择器字符串来实现它，nth-child：

＆＃13;

＆＃13;

document.querySelectorAll('#cont > p:nth-child(n + 5')
  .forEach(p => p.textContent = 'Changed');

＆＃13;

<div id="cont">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果它没有修复，只需先将该集合减半：

＆＃13;

＆＃13;

const ps = document.querySelectorAll('#cont > p');
[...ps].slice(parseInt(ps.length / 2))
  .forEach(p => p.textContent = 'Changed');

＆＃13;

<div id="cont">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
</div>

＆＃13;

＆＃13;

＆＃13;

当您分配文字时，请尝试分配到textContent而不是innerHTML。在故意分配HTML字符串时应使用innerHTML。