我怎样才能到达 div 的 child？

Question

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

a)这个span的内容

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>

Answer 1

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

示例：

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

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

示例：

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

Answer 2

和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

上找到更多

Answer 3

Jquery

获取第二个span的内容：

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

获取相同跨度的小费

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

Answer 4

要访问一组跨度中的第二个跨度，您可以使用 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');

Answer 5

这里有一个非常简单的解决方案 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>

到select第二个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.

我怎样才能到达 div 的 child？

How can i get to the child of div?

html

children