我怎样才能找到 div 的孩子？答案

【问题标题】：How can i get to the child of div?我怎样才能找到 div 的孩子？
【发布时间】：2017-09-26 21:10:28
【问题描述】：

我怎样才能到达第二个跨度并从这里获取：

a)这个跨度的内容

b)这个跨度的尖端

如何在不使用 id 或其他东西的情况下区分这些跨度？

<div class="yea">
    <span tip="red">apple</span>
    <span tip="orange">orange</span>
    <span tip="yellow">banana</span>
    <span tip="brown">pineapple</span>
</div>

【问题讨论】：

使用 CSS 或 JavaScript，您以后究竟想完成什么？你应该提供更多细节。你还尝试过什么？

标签： html children

【解决方案1】：

这是一个非常简单的纯 JavaScript 解决方案：

var el = document.getElementsByClassName('yea')[0].children[1],
    txt = el.textContent,
    tip = el.getAttribute('data-tip');

console.log(txt, tip);

<div class="yea">
  <span data-tip="red">apple</span>
  <span data-tip="orange">orange</span>
  <span data-tip="yellow">banana</span>
  <span data-tip="brown">pineapple</span>
</div>

要选择第二个span，您还可以使用：

// getElementsByTagName
var el = document.getElementsByClassName('yea')[0].getElementsByTagName('span')[1];

// querySelector
var el = document.querySelector('.yea > span[data-tip="orange"]');

顺便说一下，tip 不是有效的 HTML 属性。您应该将其替换为 data-tip。

【讨论】：

【解决方案2】：

您可以使用“CSS3 :nth-of-type() Selector”来设置跨度的样式，而无需使用或访问单独的唯一选择器。

例子：

span:nth-of-type(2) { // 2 grabs second instance
    background: red; // sample
}

您没有在问题中添加 jQuery 或 JavaScript 标记；但我相信这就是您所寻找的，对于您问题的另一方面。 .text();

例子：

$('span:nth-of-type(2)').text();

【讨论】：

【解决方案3】：

要访问一组跨度中的第二个跨度，您可以使用nth-child(2) 或nth-of-type(2)。要访问内容和属性，您必须使用 JavaScript 优先 jQuery，

访问内容

$(".yea span:nth-of-type(2)').text();

访问属性tip

 $(".yea span:nth-of-type(2)').attr('tip');

【讨论】：

【解决方案4】：

jQuery

获取第二个跨度的内容：

$( "div span:nth-child(2)" )

获取相同跨度的尖端

var tip = $( "span:nth-child(2)" ).attr( "tip" );

【讨论】：

【解决方案5】：

使用 CSS

.yea /*class selector*/
{
  border: 1px solid blue;
}
.yea span[tip] /* selector for all spans with attribute 'tip' inside elements with class 'yea' */
{
  display: inline-block;
  min-width: 70px;
  border: 1px solid red;
}
span[tip]:first-child
{
  color: red;
}
span[tip]:last-child
{
  color: brown;
}
span[tip]:nth-child(2)
{
  background: darkgreen;
  color: orange;
}
span[tip]:nth-child(3)
{
  background: blue;
  color: yellow;
}

<div class="yea">
    <span tip="red">apple</span>
    <span tip="orange">orange</span>
    <span tip="yellow">banana</span>
    <span tip="brown">pineapple</span>
</div>

您可以在 w3schools 上找到更多信息

【讨论】：