Question

例如，我试图在此页面上选择.col四个hide-mobile内的p标签：

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

在控制台中，我尝试使用$（＆＃34; col 4 hide-mobile＆＃34;，＆＃34; p＆＃34;）。css（＆＃34; color＆＃34;，＆＃34; green＆＃34）;将该行中的p标记更改为绿色，但我搞砸了一些东西。关于如何从该行获取数据的任何想法？

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

Answer 1

根据您拥有的HTML结构，您可以使用 descendant selector （这是一个空格）以及 nth-child() 伪类选择器以选择问题<p>中的第二个<div>元素：

$("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>

而且，要从该元素中提取数字，我们需要进行一些字符串解析：

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>

了解选择器 here 。

Answer 2

因为.col，.four和.hide-mobile都是你需要编写你的后代选择器的类

$(".col.four.hide-mobile p").css("color", "green");

Answer 3

有几种方法可以做到这一点。您可以将它作为@ScottMarcus提到的选择器中的后代包含在其中：

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

或者您可以使用find()从父级抓取它：

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

我个人会使用第一个，因为使用额外的jquery选择器有点过分，但有时需要使用第二个（例如，如果p在以后动态插入DOM中日期，你已经有了col的引用，所以我觉得我还是会发声的

如何在另一个元素中选择一个元素？

3 个答案: