jQuery class 选择器和文本添加

Question

我有两个文件 index.html 和 star.js。我的索引文件看起来是这样的：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div class="foo">
            <h2>First:</h2>
            <p>3</p>
        </div>
        <div class="foo">
            <h2>Second:</h2>
            <p>5</p>
        </div>
    </body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="star.js" charset="utf-8"></script>
    </html>

我的 js 文件看起来像这样：

    var element = $(".foo > p");
    //Try to figure it out
    console.log('First: ' + element.text() + ' second: ' + element.text());

我想从这段代码中得到的只是按正确的顺序注销：

First: 3 second: 5

但是我的控制台给了我这个：

First: 35 second: 35

我知道 $(".%classname%) 方法看起来认为文件中的所有 foo 类但它不是 return 数组。我能以某种方式解决我的问题吗？

我需要使用 jQuery。不是带有 .getElementsByClassName 的纯 js。
我无法更改我的类名字。 .foo 要求。
我需要不依赖于类.

我在 :eq() 伪选择器中找到了最接近的解决方案，但还有其他方法吗？

Answer 1

text 方法将 return 文本 jQuery 对象中存在的所有元素的内容。

您将必须遍历元素中的项目，然后像这样打印每个项目

var element = $(".foo");
element.each(function() {
  var $this = $(this);
  snippet.log($this.find('h2').text() + ': ' + $this.find('p').text());
})

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foo">
  <h2>First:</h2>
  <p>3</p>
</div>
<div class="foo">
  <h2>Second:</h2>
  <p>5</p>
</div>

Answer 2

尝试

$('.foo:nth-child(1) p').text()

和

$('.foo:nth-child(2) p').text()

编辑： 将从 fiddle 中提取我的答案以供将来参考：

使用循环遍历任意数量的元素

for(i=1; i <= $('div.foo').length; i++){
        $('.output').append($('.foo:nth-child('+i+') h1').text() + ": ");
    $('.output').append($('.foo:nth-child('+i+') p').text() + "<br/>");
}

jQuery class 选择器和文本添加

jQuery class selector and text adding

javascript

jquery

getelementsbyclassname