javascript - JQuery 根据不同元素中的文本获取标题值

Question

我是 JavaScript 和 JQuery 新手，我想从一个站点获取数据，但在获取该数据时遇到问题。

我有这样的列表:

<ul class="list">
    <li class="hero">
    <p class="heroname">Hero1</p>
        <ul class="stats">
            <li>
                <span class="herostats" title="42">someText</span>
                <span class="description">strength</span>
            </li>
            <li>
                <span class="herostats" title="15">someText</span>
                <span class="description">defence</span>
            </li>
        </ul>   
    </li>
    <li class="hero">
        <p class="heroname">Hero2</p>
            <ul class="stats">
                <li>
                    <span class="herostats" title="18">someText</span>
                    <span class="description">strength</span>
                </li>
                <li>
                    <span class="herostats" title="33">someText</span>
                    <span class="description">defence</span>
                </li>
            </ul>   
        </li>
    <!--and so on with other heros...-->
</ul>

我想从第一个 span 中的 title 标签获取值，但这些 span 具有相同的 class ，因此这两个 li 标记之间的唯一区别是第二个 span 标记中的文本。

我已经尝试过这个:

data = [];

$(".list > li").each(function() {
    obj = {};

    obj.name = $(this).find("heroname").text();
    obj.str = $(this).find("herostats").attr("title");
    obj.defe = $(this).find("herostats").attr("title");

    data.push(obj);
});

jsonData = JSON.stringify(data);
console.log(jsonData);

但这只给我第一个 li 标记的值。

我的输出:[{"name":"hero1","str":"42","defe","42"},{"name":"hero2","str":"18","def":"18"}...]

所需输出:[{"name":"hero1","str":"42","def","15"},{"name":"hero2","str":"18","defe":"33"}...]

感谢帮助

Answer 1

我的提案基于 eq-selector :

$(function () {
  data = [];

  $(".list > li").each(function() {
    obj = {};

    obj.name = $(this).find(".heroname").text();
    obj.str = $(this).find(".herostats:eq(0)").attr("title");
    obj.defe = $(this).find(".herostats:eq(1)").attr("title");

    data.push(obj);
  });
  document.body.innerHTML += 'Result: ' + JSON.stringify(data, null, 4);
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<ul class="list">
    <li class="hero">
        <p class="heroname">Hero1</p>
        <ul class="stats">
            <li>
                <span class="herostats" title="42">someText</span>
                <span class="description">strength</span>
            </li>
            <li>
                <span class="herostats" title="15">someText</span>
                <span class="description">defence</span>
            </li>
        </ul>
    </li>
    <li class="hero">
        <p class="heroname">Hero2</p>
        <ul class="stats">
            <li>
                <span class="herostats" title="18">someText</span>
                <span class="description">strength</span>
            </li>
            <li>
                <span class="herostats" title="33">someText</span>
                <span class="description">defence</span>
            </li>
        </ul>
    </li>
    <!--and so on with other heros...-->
</ul>