Question

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

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>

Answer 1

您可以使用＆＃39; CSS3 :nth-of-type()选择器＆＃39;在不使用或无法访问各个独特选择器的情况下设计您的跨度。

示例：的

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

您没有在您的问题中添加jQuery或JavaScript代码;但我相信这是你所寻求的，对于你问题的另一方面。 .text();

示例：的

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

Answer 2

使用CSS

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您在w3schools

上找到的更多内容

Answer 3

<强> Jquery的

获取第二个范围的内容：

$( "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>

要选择第二个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的孩子？

5 个答案: