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>

我希望在title中获取span代码中的值，但spans具有相同的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

在您的问题代码中，您使用的是find("heroname")，find(".heroname")。

由于每个项目中有2个元素".herostats"，因此您可以使用first()和last()函数。在这些场景中，最好使用map()而不是使用每个循环。

data = $(".list > li").map(function() {
  return {
    'name' : $(this).find(".heroname").text(),
    'str' : $(this).find(".herostats").first().attr("title"),
    'defe' : $(this).find(".herostats").last().attr("title")
  };
});

jsonData = JSON.stringify(data);
document.write(jsonData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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>

Answer 2

您缺少班级标识符＆＃39;。＆＃39;在你的代码中。这是更新的：

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

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

data.push(obj);
});

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

Answer 3

我的提案基于eq-selector：

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

Answer 4

如果您只希望每个li stat内有ul，那么

替换此行

$(".list > li").each(function(){

通过

$(".list ul.stats li:last-child").each(function(){

<强>样本

＆＃13;

data = [];

$(".list ul.stats li:last-child").each(function(){
obj = {};

obj.name = $(this).parent().prev(".heroname").text();
obj.str = $(this).find(".herostats").attr("title");
obj.defe = $(this).find(".herostats").attr("title");

data.push(obj);
});

jsonData = JSON.stringify(data);
alert(jsonData);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>

＆＃13;

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

4 个答案: