---
title: "Target first child med jQuery"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/185352-target-first-child-med-jquery"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Lawyer"
published: "2010-11-23T09:24:06.000Z"
updated: "2010-11-23T21:56:38.000Z"
replies: 7
views: 1093
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/185352-target-first-child-med-jquery"
---

# Target first child med jQuery

## #1 — Lawyer, 2010-11-23T09:24Z

Hej!

Jag är inte så hipe på JavaScript och undrar om någon kan hjälpa mig med följande:

Jag har en meny (med två sub-menus) som ser ut såhär:

```
HTML
<ul>
	<li class="menu-item">Produkter</li>
		<ul class="sub-menu">
			<li>Produkt 1</li>
			<li>Produkt 2</li>
			<li>Produkt 3
				<ul class="sub-menu">
					Produkt 3.1
					Produkt 3.2
					Produkt 3.3
				</ul>
			</li>
		</ul>
	<li class="menu-item">Tjänster</li>
	<li class="menu-item">Etc..</li>
<ul>
```

Jag vill med hjälp av jQuery få undermenyn att glida ner on hoover på menu-item, och mitt problem är att efter som menyn har 3 nivåer, och båda undermenyerna heter sub-menu i class, glider de ner båda två när jag för musen över "produkter" (båda nivåer 2an och 3an visas istället för bara nivå 2). Klassen på undermenyerna går ej att ändra utan jag måste anropa dessa en och en. Någon som ser kodbiten i jQuery som jag saknar?
Tack för all hjälp!

```
jQuery
$(document).ready(function(){
	$(".sub-menu").slideUp(100, function(){$(".menu-item").css({overflow:'visible'})});
	$(".menu-item").hover(
		function(){
			if($(".sub-menu", this).queue().length < 2)
				$(".sub-menu", this).slideDown(250);
		},function(){
			$(".sub-menu", this).slideUp(250);
		}
	);
});
```

Permalänk: https://www.webforum.nu/p/185352

## #2 — SPiN, 2010-11-23T09:29Z

Med selectorn **$('li.menu-item \> ul.sub-menu')** kan du targeta en *sub-menu* direkt underställd *menu-item*. Med selectorn **$('ul.sub-menu \> li \> ul.sub-menu')** borde du komma åt nästa lista. Tänk också på att du kan använda *$(this).find(\<selector\>)* för att hämta noder under aktivt element.

Permalänk: https://www.webforum.nu/p/2260299

## #3 — Lawyer, 2010-11-23T10:40Z

Tack för ett snabbt svar, men det fungerar inte när jag lägger in den i ovanstående jQuery kodbiten. Kan det vara konflikt för att det står "this" efter selectorn?

Permalänk: https://www.webforum.nu/p/2260307

## #4 — voigtann1, 2010-11-23T11:04Z

Det känns som din html struktur är felaktig.

$(selecotrs, parent), this i ditt fall säger letar efter ".sub-menu" inne i aktuella ".menu-item" läs mer: <http://api.jquery.com/jQuery/>

Så det är helt korrekt, känns som du krånglar till det, jag gjorde om din js kod och satte ett id på din huvud ul (och skrev om ul html koden) till: <http://jsbin.com/exobo4/> är det detta du är ute efter?

Permalänk: https://www.webforum.nu/p/2260310

## #5 — Lawyer, 2010-11-23T20:47Z

Ja perfekt! Precis det jag letade efter, jag ska försöka få in det i min lösning. Html koden kan jag tyvärr inte påverka så mycket, den skrivs ut dynamiskt av wordpress.

Permalänk: https://www.webforum.nu/p/2260404

## #6 — voigtann1, 2010-11-23T21:06Z

konstigt att wordpress gör olika logiker på menyn:

```
<li class="menu-item">Produkter</li>
		<ul class="sub-menu">
...
```

 sen längre ner gör den rätt: 

```
<li>Produkt 3
				<ul class="sub-menu">
					Produkt 3.1
					Produkt 3.2
					Produkt 3.3
				</ul>
			</li>...
```

Permalänk: https://www.webforum.nu/p/2260408

## #7 — Lawyer, 2010-11-23T21:45Z

funkar perfekt nu! tack!
Hur markerar jag tråden som löst?

Permalänk: https://www.webforum.nu/p/2260413

## #8 — voigtann1, 2010-11-23T21:56Z

Ta det inlägg som löste ditt problem så ser du en länk till höger "markera som löst" ( <http://www.webforum.nu/faq.php?faq=vb_faq#faq_faq_acceptance> )

Permalänk: https://www.webforum.nu/p/2263255

---

Tråden på webben: https://www.webforum.nu/amne/javascript/185352-target-first-child-med-jquery