Question

我正在尝试选择带有子节点和第一个子节点的树节点元素，但它不是有效的选择器。

<g class="nodes">
   <g class="tree-node enter" id="tree-node-cdl3c5he">
      <g class="node-group">
        <circle class="node-shape" r="80"></circle>
        <g class="node-label-group" transform="translate(-80,-80)">
        <foreignObject class="node-content-container" width="160" height="160">
        <div class="node-content">
         <div class="inner">
          <div class="node-label" data-test-id="node-label-new-part">New Part</div>
        </div></div></foreignObject></g><g class="root-group" transform="translate(0,-80)"><circle class="root-shape" r="15"></circle></g>
</g>
</g>
</g>

使用第一个孩子：

$('.nodes > .tree-node:first-child')

Ember测试：

await click($('.nodes > .tree-node:first-child'));

错误：无法执行＆＃39; querySelector＆＃39; on＆＃39; Document＆＃39;：＆＃39;＃ember-testing [object Object]＆＃39;不是有效的选择器。

Answer 1

$('.nodes > .tree-node:first-child')工作正常，并且不是无效的选择器，如下所示。它将返回.nodes的第一个孩子与.tree-node课程，如果你想在.tree-node内找到第一个孩子，那么你需要添加一个空格$('.nodes > .tree-node :first-child')

$('.nodes > .tree-node:first-child')
预期►<g class="tree-node enter" id="tree-node-cdl3c5he">

＆＃13;

var x = $('.nodes > .tree-node:first-child');
console.log(x)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<g class="nodes">
  <g class="tree-node enter" id="tree-node-cdl3c5he">
    <g class="node-group">
      <circle class="node-shape" r="80"></circle>
      <g class="node-label-group" transform="translate(-80,-80)">
        <foreignObject class="node-content-container" width="160" height="160">
          <div class="node-content">
            <div class="inner">
              <div class="node-label" data-test-id="node-label-new-part">New Part</div>
            </div>
          </div>
        </foreignObject>
      </g>
      <g class="root-group" transform="translate(0,-80)">
        <circle class="root-shape" r="15"></circle>
      </g>
    </g>
  </g>
</g>

＆＃13;

$('.nodes > .tree-node :first-child')
预期►<g class="node-group">

＆＃13;

var x = $('.nodes > .tree-node :first-child');
console.log(x)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<g class="nodes">
  <g class="tree-node enter" id="tree-node-cdl3c5he">
    <g class="node-group">
      <circle class="node-shape" r="80"></circle>
      <g class="node-label-group" transform="translate(-80,-80)">
        <foreignObject class="node-content-container" width="160" height="160">
          <div class="node-content">
            <div class="inner">
              <div class="node-label" data-test-id="node-label-new-part">New Part</div>
            </div>
          </div>
        </foreignObject>
      </g>
      <g class="root-group" transform="translate(0,-80)">
        <circle class="root-shape" r="15"></circle>
      </g>
    </g>
  </g>
</g>

＆＃13;

Answer 2

访问像$('.nodes > .tree-node:first')[0]工作的对象。

jQuery [object Object]不是有效的选择器

2 个答案: