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

【问题标题】：How can I select an element inside of another element?如何在另一个元素中选择一个元素？
【发布时间】：2017-02-01 20:31:51
【问题描述】：

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

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

在控制台中我尝试使用 $("col 四 hide-mobile","p").css("color","green");将该行中的 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>

【问题讨论】：

你能告诉我们那个p的HTML和它的父HTML吗？

标签： javascript jquery html console

【解决方案1】：

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

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

【讨论】：

您不需要在查询中将它们定义为类而不是标签吗？ $(".col.four.hide-mobile p").css("color","green");
@AlexanderStaroselsky 是的。谢谢。
不，您需要将它们粘在一起$(".col.four.hide-mobile p").css("color","green");，否则它会寻找.col 的孩子编辑：我看到它现在改变了;)
@AlexanderStaroselsky 似乎这不起作用......也许我在 html 的错误部分？编辑*后编辑它正在工作。
如果每个都是下一个的后代，您不会将它们粘在一起。但是，由于我看不到实际的 HTML 结构，所以我用空格显示它以说明后代选择器。

【解决方案2】：

由于 .col、.four 和 .hide-mobile 都是您编写后代选择器所需的类

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

【讨论】：

只有在父元素使用所有类时才有效。
谢谢，这是正确的！假设我想选择第三个 p 我会写 $(".col.four.hide-mobile p")[3].css("color","green");
$(".col.four.hide-mobile p:nth-child(3)").css("color","green");
@BrettKessler 不客气。请考虑将我的答案标记为正确答案。
@ScottMarcus 好的，所以现在我的下一个问题是如何在整行中记录该 p 标签中的所有数字？我试过这个 $(".col.four.hide-mobile p:nth-child(2)").html();但这只给了我一排。我将你的标记为正确。

【解决方案3】：

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

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

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

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

我个人会使用第一个，因为使用额外的 jquery 选择器有点矫枉过正，但有时需要使用第二个（例如，如果 p 在以后动态插入到 DOM 中并且你已经参考了col) 所以我想我还是会插话的

【讨论】：