Question

多个div包含相同的html5数据属性

具有相同的值。每个div内都是b和p标签，它们具有相同的html 5数据属性和相同的值。

要求是以这种格式捕获每个div值。依此类推。结果示例- T1标题1 D1说明1 | T2 title2 D2 description2 | T3 title3 D3 description3

这是div代码

<div data-v-46636d4a="" class="panel_2N_jF">
  <div data-v-46636d4a="" data-purpose="selected-prescription">
    <b data-v-46636d4a="" data-purpose="prescription-name">T1 title1</b>
    <p data-v-46636d4a="" data-purpose="prescription-description">D1 description1</p>
  </div>
  <div data-v-46636d4a="" data-purpose="selected-prescription">
    <b data-v-46636d4a="" data-purpose="prescription-name">T2 title 2</b>
    <p data-v-46636d4a="" data-purpose="prescription-description">D2 description2</p>
  </div>
  <div data-v-46636d4a="" data-purpose="selected-prescription">
    <b data-v-46636d4a="" data-purpose="prescription-name">T3 title3</b>
    <p data-v-46636d4a="" data-purpose="prescription-description">D3 description3</p>
  </div>
</div>

我使用了简单的这段代码：

console.log(
  document.querySelector("body > div:nth-child(1) > div:nth-child(1) > b").textContent + ' ' 
+ document.querySelector("body > div:nth-child(1) > div:nth-child(1) > p").textContent + ' ' + '|' 
+ document.querySelector("body > div:nth-child(1) > div:nth-child(2) > b").textContent + ' ' 
+ document.querySelector("body > div:nth-child(1) > div:nth-child(2) > p").textContent + ' ' + '|' 
+ document.querySelector("body > div:nth-child(1) > div:nth-child(3) > b").textContent + ' ' 
+ document.querySelector("body > div:nth-child(1) > div:nth-child(3) > p").textContent
);

但是对多个div进行此操作的理想方法是什么。

Answer 1

在MDN上签出document.querySelectorAll。它返回NodeList个元素，然后您可以将其转换为数组并进行迭代（使用Array.from或散布运算符，即new Array(...nodeList)。

您的数据看起来像这样：

<body>
  <div data-my-attr="value">
    <b>Tag Text 1</b>
    <p>Paragraph text 1</p>
  </div>
  <div data-my-attr="value">
    <b>Tag Text 2</b>
    <p>Paragraph text 2</p>
  </div>
  ... <!-- more divs -->
</body>

您想要的输出是：Tag Text 1 Paragraph text 1 | Tag Text 2 Paragraph Text 2。

您可以使用以下函数调用来获取具有给定data属性的所有div：

const divs = document.querySelectorAll('div[data-my-attr]')。然后遍历它们：

const texts = [...divs].map(div => {
  return `${div.querySelector('b').textContent} ${div.querySelector('p').textContent`
})
const result = texts.join('|')

Answer 2

也许这会帮助您

var Div_Childs = document.querySelector('div[data-v-46636d4a]').children;

var message = [];

for( var i = 0; i < Div_Childs.length; i++ ) {
  message.push(  Div_Childs[i].querySelector('b').textContent + ' '
                + Div_Childs[i].querySelector('p').textContent );
}

console.log (message.join(' | '));

<div data-v-46636d4a class="panel_2N_jF">
  <div data-v-46636d4a data-purpose="selected-prescription">
    <b data-v-46636d4a data-purpose="prescription-name">T1 title1</b>
    <p data-v-46636d4a data-purpose="prescription-description">D1 description1</p>
  </div>
  <div data-v-46636d4a data-purpose="selected-prescription">
    <b data-v-46636d4a data-purpose="prescription-name">T2 title 2</b>
    <p data-v-46636d4a data-purpose="prescription-description">D2 description2</p>
  </div>
  <div data-v-46636d4a data-purpose="selected-prescription">
    <b data-v-46636d4a data-purpose="prescription-name">T3 title3</b>
    <p data-v-46636d4a data-purpose="prescription-description">D3 description3</p>
  </div>
</div>

？

如何捕获具有相同数据属性的多个div的文本？

2 个答案: