Question

好的，两个小时后，我无法解决这个问题......

我有：

<section id="sectionmain">
  Section1
 <article data-type="mainarticle" class="page-article" id="home-main">
   <section>
      Section2
     <nav data-parent="home-main" data-type="mainleft" class="page-left">Nav2</nav>
   </section>
  </article>
 <nav data-type="mainleft" class="page-left">
    Nav1
 </nav>
</section>

$("#sectionmain").first().find("[data-type='mainleft']")[0];

请参阅：http://jsfiddle.net/uYZmq/3/

我想找到#sectionmain目标的第一个元素，其中data-type为"mainleft"。

正如你在小提琴中看到的那样，我有一个嵌套的<article>块。它也包含一个<nav>，同样data-type但我不想要那个，我想要第一次出现。但不知何故，无论是firefox还是chrome，都认为第二个嵌套的是第一个，这没有任何意义。有没有办法解决这个问题，并找到目标的真正的第一个元素？

我尝试使用.children()，.closest()和其他组合的全部负载，但没有尝试。

即使有比这更多的嵌套，我也需要它。

我只想在元素的id中搜索，然后找到'its' <nav>，而不是其子元素<nav>。所以基本上将搜索限制在一个级别。

（我需要将数据类型命名为相同（左页），它通过css设置样式。我不想在元素中添加任何其他类或变量）

/ edit：我也不希望[0]成为[1]，我想要的代码无论在什么情况下都能正常工作，因为如果它会在文章之前出现，那就可以了......

Answer 1

第一个元素是#sectionmain目标的子元素，其数据类型为“mainleft”。

document.querySelector("#sectionmain>[data-type='mainleft']")

或使用jQuery：

$("#sectionmain>[data-type='mainleft']")[0]

>符号会将查询限制为直接子项。

在层次结构中查找第一个元素，而不是在子元素中

1 个答案: