CODEWITHSUNDEEP
javascriptjqueryhtml
edasssus
edasssus

Reputation: 351

JQuery get title values based on text in different element

I'm new to JavaScript and JQuery and I want to get data from one site but run in problem with getting that data.

I have list like this:

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

And I want to get values from title tag in first span, but those spans have same class, so only difference between those two li tags are texts in the second span tag.

I have already tried this:

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

but this gives me only values from the first li tag.

my output: [{"name":"hero1","str":"42","defe","42"},{"name":"hero2","str":"18","def":"18"}...]

desired output: [{"name":"hero1","str":"42","def","15"},{"name":"hero2","str":"18","defe":"33"}...]

Thank for help

Upvotes: 2

Views: 53

Answers (4)

gaetanoM
gaetanoM

Reputation: 42044

My proposal is based on 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>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68393

If you only want the last li inside each stat ul then

Replace this line 

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

by

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

DEMO

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

Upvotes: 0

rrk
rrk

Reputation: 15846

In your question code, you are using find("heroname"), which should be find(".heroname").

Since there are 2 elements with ".herostats" in each items, you can use first() and last() functions. Also it is better to use map() than using each loop in these scenarios. 

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>

Upvotes: 1

Nikhilesh K V
Nikhilesh K V

Reputation: 1480

You are missing the class identifier '.' in your code. Here is the updated one :

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

Upvotes: 1

Related Questions