Question

在这个特定的website上，我试图创建一个查询选择器，以使用id =＆＃39; plans-tab＆＃39;获取div中的所有内容。这是我到目前为止所得到的：

document.querySelector('#plans-tab .row .small-12.columns:nth-child(1)')

它让我获得了第一个项目。但如果我试图制作

document.querySelector('#plans-tab .row .small-12.columns:nth-child(2)')

返回null。在该标签内，大约有14-15个项目，所以它应该有效。我在这做错了什么？

如果网站要求输入邮政编码，只需输入51030560即可，

编辑：这是一个包含更多HTML代码的jsfidle：https://jsfiddle.net/gz1ht2to/1/

Answer 1

首先，您的网站没有ID为“＃plans-tab”的div，但如果我的问题正确，那么这可能是您正在寻找的解决方案：

这只是虚拟HTML：

<div id="plans-tab">
  <input>
  <button>
  Click
  </button>
  <input>
  <div>

  </div>
</div>

<div id="html-to-display">

</div>

这是我使用的jQuery：

var variable = $("#plans-tab");
$("#html-to-display").text(variable.html());

我希望这会有所帮助。

Answer 2

你的选择器：#plans-tab .row .small-12.columns:nth-child(2)找到第一个元素是第二个孩子，有类＆＃34;小-12＆＃34;和＆＃34;列＆＃34;这是一个带有类＆＃34; row＆＃34;的元素的后代。这是具有id＆＃34; plans-tab＆＃34;。

的元素的后代

从你的jsfiddle转述：

<div id="plans-tab"> <---- "#plans-tab"
  <div class="hidden" id="current_plan">
    <div class="row"> <---- " .row"
      <div class="small-12 columns">  <---- " .small-12.columns:nth-child(1)"
        <h2>Escolha o seu plano</h2>
        <!-- ngRepeat: planMember in plans -->
        <div data-ng-repeat="planMember in plans" class="ng-scope">
          <div class="plan-container small-12 columns selected" data-ng-class="{&quot;selected&quot;: plan.id == planMember.id}" data-ng-hide="isPortabilityPrePlan(planMember)">

我认为你想要的是：#plans-tab .row .small-12.columns :nth-child(2)，它是第一个元素，它是第二个孩子，是一个元素的后代，有一个类＆＃34;小-12＆＃34;和＆＃34;列＆＃34;这是一个带有类＆＃34; row＆＃34;的元素的后代。这是具有id＆＃34; plans-tab＆＃34;。

的元素的后代

<div id="plans-tab"> <---- "#plans-tab"
  <div class="hidden" id="current_plan">
    <div class="row"> <---- " .row"
      <div class="small-12 columns">  <---- " .small-12.columns"
        <h2>Escolha o seu plano</h2>
        <!-- ngRepeat: planMember in plans -->
        <div data-ng-repeat="planMember in plans" class="ng-scope"> <---- " :nth-child(2)"
          <div class="plan-container small-12 columns selected" data-ng-class="{&quot;selected&quot;: plan.id == planMember.id}" data-ng-hide="isPortabilityPrePlan(planMember)">

唯一的区别是空间，它具有语义价值。 "x:y" ==＆＃34; x是y＆＃34;。 "x :y" ==＆＃34; x具有y＆＃34;

查询选择器和nth-child有问题

2 个答案: