Найти первый элемент в иерархии, а не в дочерних

Хорошо, два часа спустя, я не могу это исправить...

У меня есть:

<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, так и хром, думаю, что второй вложенный - первый, что не имеет смысла. Есть ли способ обойти это и найти REAL первый элемент цели?

Я пробовал с .children(), с .closest() и целую загрузку других комбинаций, но ничего.

Мне нужно, чтобы он работал, даже если есть больше гнезд, чем это.

Я просто хочу искать внутри идентификатора элемента, а затем найти "его" <nav>, а не его дочерние элементы <nav>. Таким образом, в основном ограничение поиска на один уровень.

(Мне нужно, чтобы типы данных назывались одинаковыми (с левой стороны страницы), они создавались с помощью css. И я не хочу добавлять дополнительные элементы или переменные в элементы)

/edit: Я не хочу, чтобы [0] был [1], я хочу, чтобы код работал независимо от ситуации, потому что, если бы он пришел к статье, это сработало бы...