Nästa objekt på sidan

Om jag har ett objekt "obj", hur får jag ut nästa objekt?

Om obj är en <li> och nästa är en <ul> så funkar ju "obj.nextSibling", men om obj är en <span> och nästa är en <ul> så funkar inte det. Hur ska jag göra i detta fall?

Vad menar du med "nästa"?

<span></span>
<ul>

eller

<span>
  <ul>

Den senare är ogiltig.

Naj, så här:

.
.
.
<li><span>Hej</span></li>
<ul><ul>
.
.
.

Att nextSibling inte fungerar om obj = <span>, är ju inget konstigt. Vad vill du ha för resultat?

När man klickar på <span> så skall den <ul> som kommer visas (den är display:none innan). Allt innehåll i listan hämtas från en databas.

Jag undrar helt enkelt ifall man kan få ut nästa element efter obj.

Men inte heller ditt exempel är korrekt uppbyggt. Ditt <ul>-element bör ligga inom ett <li>:

<ul>
  <li><span id="span" onclick="var elm=this.parentNode; while(!/^li$/i.test((elm = elm.nextSibling).nodeName)); elm.style.display='block'">click!</span></li>
  <li style="display:none">
    <ul>
      <li>...</li>
    </ul>
  </li>
</ul>

Anledningen till while-loopen är att IE inte förstår DOM-hierarkin riktigt (zcorpan ;) ). Det första <li>-elementets sibling är en textnod, ej ett <li>, vilket webbläsare som FF och Opera fattar.

Ok, det funkar bra så långt. Tack!

Hur ska jag göra för att hålla framklickad lista öppen vid omladdning av sidan? Något med kakor kanske... Hur ska jag göra? Tack på förhand.

Skall endast en lista kunna vara öppen åt gången?

Nej, flera. Man får "klicka ihop" dem själv.

Så här skulle jag kunna göra:

<script type="text/javascript">
function openMenu(elm)
{ while (!/ul/i.test((elm = elm.nextSibling).nodeName));
  var cv = Cookie.get("uls");
  if (elm.style.display != "block"){
    elm.style.display = "block";
    cv += elm.id + ";";
  } else {
    elm.style.display = "none";
    cv = cv.replace(new RegExp(elm.id + ";"), "");
  }

  if (cv){ new Cookie("uls", cv, "19-Feb-2026 00:00:00 GMT", false, "/").set() }
  else   { Cookie.remove("uls", "/") }
  return false;
}
window.onload = function()
{ var cv = Cookie.get("uls");
  if (cv){
    cv = cv.split(";");
    for (var i in cv){
      if (cv[i]){ document.getElementById(cv[i]).style.display = "block" }
    }
  }
}
</script>
<script type="text/javascript">
/*
 * Detta script skrivet av Gustaf Cele är fritt för användning, spridning och modifiering.
 */

// Cookieklassen

function Cookie(name, value, expires, domain, path, secure){
	this.name    = name;
	this.value   = value;
	this.expires = expires;
	this.domain  = domain;
	this.path    = path;
	this.secure  = secure;
	
	}

// Metoder för cookieklassen

function set(){
	var cookiestr = escape(new String(this.name)) + "=" + escape(new String(this.value));
	if(this.expires) cookiestr += "; Expires=" + this.expirationString();
	if(this.domain)  cookiestr += "; Domain=" + this.domain;
	if(this.path)    cookiestr += "; Path=" + this.path;
	if(this.secure)  cookiestr += "; Secure";
	document.cookie = cookiestr;
	}

function expirationString(){
	var ex = this.expires;
	if(typeof ex == typeof "string") return ex;
	if(typeof ex == typeof 1){
		var msPerDag = 1000 * 60 * 60 * 24;
		ex = new Date();
		ex.setTime(ex.getTime() + (msPerDag * this.expires));
		}
	return ex.toUTCString ? ex.toUTCString() : ex.toGMTString();
	}

function setDomainToCurrent(){
	this.domain = self.location.host;
	}

function setPathToCurrent(){
	var pth = self.location.pathname.substr(self.location.pathname.indexOf  ("/"));
	if(!pth) pth = "/";
	else pth = pth.substring(0, pth.lastIndexOf("/") + 1);
	this.path = pth;
	}

// Allmäna funktioner

function getCookie(name, alt){
	if(!alt) alt = "";
	name = escape(name) + "=";
	if(document.cookie.indexOf(name) == -1) return alt;
	
	var kaka = document.cookie.substr(document.cookie.lastIndexOf(name));
	kaka = kaka.substr(name.length);
	var slut = (kaka.indexOf(';') == -1) ? kaka.length : kaka.indexOf(';');
	kaka = kaka.substring(0, slut);
	
	return unescape(kaka);
	}

function deleteCookie(name, path){
	var cookiestr = escape(name) + "=_; Expires=Thursday, 01-Jan-1970 00:00:00 GMT";
	if(path) cookiestr += "; Path=" + path;
	document.cookie = cookiestr;
	}

function getAllCookieNames(){
	var ac = document.cookie.split(" ");
	var allCookies = new Array();
	for(var i = 0; i < ac.length; i++){
		var tmp = ac[ i].split("=");
		allCookies[ i] = unescape(tmp[0]);
		}
	return allCookies;
	}

// Lägg till metoder

Cookie.prototype.set                = set;
Cookie.prototype.expirationString   = expirationString;
Cookie.prototype.setDomainToCurrent = setDomainToCurrent;
Cookie.prototype.setPathToCurrent   = setPathToCurrent;

// Statiska metoder

Cookie.get         = getCookie;
Cookie.remove      = deleteCookie;
Cookie.getAllNames = getAllCookieNames;
</script>

<ul>
  <li>
    <a href="" onclick="return openMenu(this)">1</a>
    <ul id="u1" style="display:none">
      <li>1.1</li>
    </ul>
  </li>
  <li>
    <a href="" onclick="return openMenu(this)">2</a>
    <ul id="u2" style="display:none">
      <li>2.1</li>
    </ul>
  </li>
  <li>
    <a href="" onclick="return openMenu(this)">3</a>
    <ul id="u3" style="display:none">
      <li>3.1</li>
    </ul>
  </li>
</ul>

Notera att jag använt mig av spangos cookieskript (finns i skriptarkivet för den intresserade).

Peter S skrev:

Anledningen till while-loopen är att IE inte förstår DOM-hierarkin riktigt (zcorpan ;) ). Det första <li>-elementets sibling är en textnod, ej ett <li>, vilket webbläsare som FF och Opera fattar.

[ot]
Tack för fingervisningen. :) Jag tror det beror på att IE mer eller mindre ignorerar </li>:

<!doctype html>
<title>&lt;/li> should not be ignored</title>
<style>
 ul { background:lime; list-style:none; }
 li { background:red; }
</style>
<ul>
 <li></li> This line should have a green background.
</ul>

[/ot]