无法弄清楚如何使用孩子和第一个函数 jquery答案

【问题标题】：Not able to figure out how to use children and first function jquery无法弄清楚如何使用孩子和第一个函数 jquery
【发布时间】：2016-08-23 23:52:30
【问题描述】：

我正在尝试从 dictionary.com 编写一个抓取功能，我试图在其中获取单词及其发音。我有这个 div，我需要从中获取数据，但我无法，不确定我做错了什么。我正在获取其他 div 的数据（这是一个单词），但这个特定的 div（发音）......不。 jquery、node.js 的新手。任何朝着正确方向的事情都会很棒。

这是我尝试过的，它在其他 div 上工作得很好。（从一个工作正常的 div 中获取“单词”，但是当我得到发音时它不起作用）

$('.header-row-header-extras-pronounce-pronset').filter(function() {
  var data = $(this);
  pronunciation += data.children().first().text();

  console.log("prp: " + pronunciation);
  json.pronunciation = pronunciation;
})

<div class="header-row header-extras pronounce pronset">
  <div>
    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv]</span>
    <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
    <span class="pre-def-data"> </span>
  </div>
  <div>
    <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
    <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
  </div>
</div>

【问题讨论】：

标签： javascript jquery node.js

【解决方案1】：

三件事：

这个：
```
$('.header-row-header-extras-pronounce-pronset')
```
查找具有单一类 header-row-header-extras-pronounce-pronset 的元素。但是您的 div 没有一个具有该名称的类，它具有多个具有该名称的各个部分的类。要在一个元素上搜索多个类，您可以使用捆绑在一起的多个类选择器：
```
$(".header-row.header-extras.pronounce.pronset")
// Note ------^-------------^---------^
```
filter 用于创建一组元素的子集。如果您不使用它的返回值，请改用each。
json.pronunciation = pronunciation; 将在每次运行回调时覆盖 json.pronunciation，因此您最终只会得到最后一个。如果没有更多上下文，我们无法告诉您如何解决此问题，但我认为我应该将其标记出来。

【讨论】：

是的，这是我的问题，如果我必须从例如这个 class="pron spellpron" 类中获取数据，我该怎么做

【解决方案2】：

您的选择器正在选择一个长类，其中标记具有单独的类。

对于标记：

<div class="header-row header-extras pronounce pronset">

使用这个选择器：

$('.header-row.header-extras.pronounce.pronset').

在 jQuery 中选择元素就像使用 CSS 选择元素一样。

【讨论】：

【解决方案3】：

你说过这件事吗？根本不懂问题。但这可能对你有帮助 jFiddle example

var pronunciation = [];
$('.spellpron .dbox-bold').each(function(){
	pronunciation.push($(this).text());
});
console.log(pronunciation);

<div class="header-row header-extras pronounce pronset">
    <div>
                    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv] </span>
            <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
                            <span class="pre-def-data"> </span>
            </div>
            <div>
            <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
            <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
        </div>
    </div>
    <div class="header-row header-extras pronounce pronset">
    <div>
                    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv] </span>
            <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
                            <span class="pre-def-data"> </span>
            </div>
            <div>
            <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
            <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
        </div>
    </div>
    <div class="header-row header-extras pronounce pronset">
    <div>
                    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv] </span>
            <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
                            <span class="pre-def-data"> </span>
            </div>
            <div>
            <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
            <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
        </div>
    </div>
    <div class="header-row header-extras pronounce pronset">
    <div>
                    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv] </span>
            <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
                            <span class="pre-def-data"> </span>
            </div>
            <div>
            <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
            <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
        </div>
    </div>
    <div class="header-row header-extras pronounce pronset">
    <div>
                    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv] </span>
            <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
                            <span class="pre-def-data"> </span>
            </div>
            <div>
            <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
            <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
        </div>
    </div>
    <div class="header-row header-extras pronounce pronset">
    <div>
                    <span class="pron spellpron" style="display: inline;">[<span class="dbox-bold">ak</span>-tiv] </span>
            <span class="pron ipapron" style="display: none;">/ˈæk tɪv/ </span>
                            <span class="pre-def-data"> </span>
            </div>
            <div>
            <button class="prontoggle pronounce-button pronounce-Spell-button">Spell</button>
            <button class="syllable-button syllable-button-off" data-header="1">Syllables</button>
        </div>
    </div>

【讨论】：