Question

我目前正在使用网络组件转发器，当我尝试在同一元素中混合使用两个转发器时，我遇到了一个问题。我的HTML是：

<company-repeat id="table">
    <table class="selectable" description="Résultats de recherche">
        <thead>
            <tr>
                <company-repeat id="table-metadata">
                    <th class="sorting" repeatable>${name}</th>
                </company-repeat>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr repeatable>
                <td>${id}</td>
                <td>${name}</td>
                <td>${surname}</td>
                <td>${registered}</td>
                <td><i aria-hidden="true" class="fa fa-download" title="Télécharger">D</i></td>
            </tr>
        </tbody>
    </table>
</company-repeat>

我想要做的是根据我收到的列表动态生成thead，但问题是我的代码采用了第一个＆＃34;可重复的＆＃34;它找到的元素（this.template = this.querySelector('[repeatable]');）。我现在需要的是一个选择器来指定我想要它找到的第一个元素，只要它不是另一个公司的孩子 - 重复。

它只能用一个选择器或我必须全部检索它们，检查该元素是否是另一个元素的子元素然后只将它设置为我的属性？

document.querySelector('!company-repeat > [repeatable]');之类的东西会很完美，但我非常怀疑它是否存在。

Answer 1

仅适用于选择器......

可悲的是，不，不。没有“选择X但只有当X不是Y的后代时”。（一个受:not伪类的诱惑，但它只允许简单的选择器，而不是我们需要的复合类型。）

...或者我是否必须全部检索它们，检查该元素是否是另一个元素的子元素，然后只将它设置为我的属性？

是的，这是您需要使用的方法。

Answer 2

您可以使用两种方法。考虑我们想要找到第一个元素的代码片段中给出的示例，该元素不是<li>元素的子元素

第一种方法是查找不属于元素的所有<li>并显示第一个元素

var allP = $(document).find('p:not(li p)');
    console.log(allP[0]);

第二种方法是找到所有元素，迭代所有元素，并返回父

的第一个<li>元素

allP =  $(document).find('p');

    var correctP;

    for(i=0;i<allP.length;i++){
      if($(allP[i]).parents('li').length==0){
        correctP = allP[i];
        break;
      }
    }

    console.log(correctP);

请参阅代码段了解更多详情。

＆＃13;

 //Here we are printing first p element who's parent is not li   

//first approach
var allP = $(document).find('p:not(li p)');


console.log(allP[0]);

//second approach
allP =  $(document).find('p');

var correctP;

for(i=0;i<allP.length;i++){
  if($(allP[i]).parents('li').length==0){
    correctP = allP[i];
    break;
  }
}

console.log(correctP);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <p>Hello p1</p>
  <li><p>Hello p2</p></li>
  <li><p>Hello p3</p></li>
  <p>Hello p4</p>
</ul>

＆＃13;

仅当元素不是其他元素的子元素时才选择元素

2 个答案: