seo Question posted in
Some basic information to get you started with this can be found here.

How can I select an element inside of another element? – SEO

For example I’m trying to select the p tag inside of .col four hide-mobile on this page:

http://www.sportsline.com/college-basketball/odds/

In the console I tried using $(“col four hide-mobile”,”p”).css(“color”,”green”); to change the p tag in that row to green, but I’m screwing something up. Any idea on how I can do this to get the data from that row?

<div class="col four hide-mobile">
        &nbsp;
       </div> 
      </div> 
      <div class="row-group" itemscope itemtype="http://schema.org/SportsEvent"> 
       <meta itemprop="name" content="Penn St. at Indiana"> 
       <div class="seo location" itemprop="location" itemscope itemtype="http://schema.org/Place"> 
        <meta itemprop="name" content="Assembly Hall"> 
        <div class="seo location-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> 
         <meta itemprop="addressLocality" content="Bloomington"> 
        </div> 
       </div> 
       <a id="ember1528" href="/college-basketball/game-forecast/NCAAB_20170201_PSU@IND/" class="row data-row ember-view"> 
        <div class="col one"> 
         <div class="container"> 
          <div class="top" itemprop="startDate" content="2017-02-01T18:30:00-05:00"> 
           <i class="icon ncaab"></i> 6:30 PM EST 
          </div> 
          <div class="middle"> 
           <span itemprop="awayTeam">PSU</span> 
           <span class="odd">
            <!----></span> 
          </div> 
          <div class="bottom">
            @ 
           <span itemprop="homeTeam">Indiana</span> 
           <span class="odd">
            <!----></span> 
          </div> 
         </div> 
        </div> 
        <div class="col two hide-mobile"> 
         <div class="container"> 
          <p> IND <i class="change-icon down"></i> </p> 
          <p>-265</p> 
         </div> 
        </div> 
        <div class="col three hide-mobile"> 
         <div class="container"> 
          <p> O/U <i class="change-icon down"></i> </p> 
          <p>+144.5</p> 
         </div> 
        </div> 
        <div class="col four hide-mobile"> 
         <div class="container"> 
          <p> IND <i class="change-icon down"></i> </p> 
          <p>-6 (-110)</p> 
         </div> 
        </div> </a> 
      </div> 
      <div class="row-group" itemscope itemtype="http://schema.org/SportsEvent"> 
       <meta itemprop="name" content="George Mason at Saint Louis"> 
       <div class="seo location" itemprop="location" itemscope itemtype="http://schema.org/Place"> 
        <meta itemprop="name" content="Chaifetz Arena"> 
        <div class="seo location-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> 
         <meta itemprop="addressLocality" content="St. Louis"> 
        </div> 
       </div> 
       <a id="ember1573" href="/college-basketball/game-forecast/NCAAB_20170201_GMASON@STLOU/" class="row data-row ember-view"> 
        <div class="col one"> 
         <div class="container"> 
          <div class="top" itemprop="startDate" content="2017-02-01T19:00:00-05:00"> 
           <i class="icon ncaab"></i> 7:00 PM EST 
          </div> 
          <div class="middle"> 
           <span itemprop="awayTeam">GMASON</span> 
           <span class="odd">
            <!----></span> 
          </div> 
          <div class="bottom">
            @ 
           <span itemprop="homeTeam">STLOU</span> 
           <span class="odd">
            <!----></span> 
          </div> 
         </div> 
        </div> 
        <div class="col two hide-mobile"> 
         <div class="container"> 
          <p> GMASON <i class="change-icon up"></i> </p> 
          <p>-333</p> 
         </div> 
        </div> 
        <div class="col three hide-mobile"> 
         <div class="container"> 
          <p> O/U <i class="change-icon down"></i> </p> 
          <p>+132.5</p> 
         </div> 
        </div>
Tags:

3

Answers


  1. 0

    Given the HTML structure you have, you can use the descendant selector (which is a space) along with the nth-child() pseudo-class selector to select the second <p> element within the <div> in question:

    $("div.col.four.hide-mobile  p:nth-child(2)").css("color","green");
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col four hide-mobile"> 
  <div class="container"> 
    <p> IND <i class="change-icon down"></i> </p> 
    <p>-6 (-110)</p> 
  </div> 
</div>

    And, to extract the numbers from that element, we need to do some string parsing:

    var theP = $("div.col.four.hide-mobile  p:nth-child(2)");
theP.css("color","green");

// Get the text of the paragraph
var theText = theP.text();

// To extract the numbers we can first split the string where there are spaces and turn the 
// result into an array:
var nums = theText.split(/s+/g);

// Now, we can loop through the array and convert the strings into numbers
// that will be part of a new array:
var resultNumbers = nums.map(function(num){
  // We have to remove any characters that preceed the number
  return parseFloat(num.replace("(", ""));
});

// Finally, we can access the numbers several ways:
console.log("All the numbers are: " + resultNumbers);
console.log("The first number is: " + resultNumbers[0]);
console.log("The second number is: " + resultNumbers[1]);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col four hide-mobile"> 
  <div class="container"> 
    <p> IND <i class="change-icon down"></i> </p> 
    <p>-6 (-110)</p> 
  </div> 
</div>

    Learn about selectors here.

    Login or Signup to reply.
  2. 0

    Since .col, .four, and .hide-mobile are all classes you need to write your descendent selector like this

    $(".col.four.hide-mobile p").css("color", "green");
    Login or Signup to reply.
  3. 0

    There’s a few ways to do this. You can include it as a descendant in the selector as @ScottMarcus mentioned:

    $(".col.four.hide-mobile p")

    Or you could use find() to grab it from the parent:

    $(".col.four.hide-mobile").find('p')

    I would personally use the first since using an extra jquery selector is a bit of overkill, but there are times when it’s necessary to use the second (for example if p is dynamically inserted into the DOM at a later date and you’ve already got a reference to the col) so I thought I’d chime in anyway

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search