mehdi7376 (14) [Avatar] Offline
#1
Hi,
I've just developed a DropDownList that uses ul/li html tags to simulate the standard DropDownList, albeit, with much more functionality (Thanks to the jQuery in action, and it's author).

Consider something like this: (Please see source of this page to view the following HTML).

<span>
<div>
whatever....

<div id="container">
<input type="text" ...>
<div>

  • <span>item1</span>


    • <span>item2</span>

    • <span>item3</span>

    • <span>item4</span>

      • <span>item5</span>





    ...
    <div>

    Well, now imagine that $span points to the span with text "item5". I need to select the entire parents of the $span, up to the "first div" *after the* "container" element.

    How am I supposed to do so?

    Any help would be highly appreciated,

    TIA,
    Mehdi
mraj (104) [Avatar] Offline
#2
Re: Selecting parent childs up to a given point!
Hi Mehdi,

I have a few questions.
1. $span is your wrapped set, and the only DOM element it only contains is the span that contains "item5", correct?
2. What do you mean when you say "the entire parents of the $span"? What element, or elements, do you want to end up in the new wrapped set? Do you want to match only the div (after the container div) that contains the ul? or do you want more?
It sounds like you might want every parent above the span that contains item5. But that seems a bit odd, as it would contain the li that contains 'item5" (that's the first parent), the the ul above that (the next parent), the li that contains "item 4" (next parent), the ul that contains items2-4, the ul above that, the li for "item1", the ul above that, and the div above that. Is that what you want?
mehdi7376 (14) [Avatar] Offline
#3
Re: Selecting parent childs up to a given point!
Hi,

1. Yes, $span contains "item5".

2. I mean, the following elements:
item5,
it's parent (li),
the parent of li (ul),
the parent of ul (li),
the parent of ul (ul),
the parent of ul (ul),
div....
mraj (104) [Avatar] Offline
#4
Re: Selecting parent childs up to a given point!
Loop through the parents, building up an array of DOM elements as you go:

$(function(){ // runs when HTML has loaded
all_parents = [$("#item5")[0]]; // and the starting DOM element
var current_element = $("#item5"); // really a jQuery object, not a DOM element
while(current_element.parent()[0].id != "container") {
all_parents.push(current_element.parent()[0]);
current_element = current_element.parent();
}
$("#console").append("Parents: ");
$(all_parents).each(function() { $("#console").append(this.id + ' ') });
$(all_parents).css('background-color','yellow');
});


< div id="container">
< input id="input1" type="text">
< div id="div1">
< ul id="ul1">
< li id="li1">< span>item1< /span>
< ul id="ul2">

< li id="li2">< span>item2< /span>< /li>
< li id="li3">< span>item3< /span>< /li>
< li id="li4">< span>item4< /span>
< ul id="ul3">
< li id="li5">< span id="item5">item5< /span>< /li>
< /ul>

< /li>
< /ul>
< /li>
< /ul>

< div id="console"> < /div>

Output is
Parents: item5 li5 ul3 li4 ul2 li1 ul1 div1
and the parents are all yellow (but since some of the parents are ul elements, everything turns yellow -- use something like Firebug to see which elements had CSS yellow backgrounds added).

At first, I tried to use .add() to add to a jQuery object:
all_parents = $("#item5"); // and the starting DOM element
var current_element = $("#item5"); // really a jQuery object, not a DOM element
while(current_element.parent()[0].id != "container") {
all_parents.add(current_element.parent()[0]);
current_element = current_element.parent();
}

But I could not get add() to add a parent element to the wrapped set (i.e., to the jQuery 'all_parents' object). Anyone know why this doesn't work??

I also tried all_parents.add(current_element.parent());

Note that this works:
all_parents = $("#item5").add("#input1");

But this does not:
all_parents = $("#item5");
all_parents.add("#input1"smilie; <<<---- this is the real problem, I guess
mraj (104) [Avatar] Offline
#5
Re: Selecting parent childs up to a given point!
> Note that this works:
> all_parents = $("#item5"smilie.add("#input1"smilie;
> but this does not:
> all_parents = $("#item5"smilie;
> all_parents.add("#input1"smilie; <<<---- this is the real problem, I guess

OK, after some jQuery bulletin board searching, it seems that .add() does not add elements to the existing jQuery object. It creates a new object, so this works (note, I cleaned up the function somewhat too):

$(function(){ // runs when HTML has loaded
all_parents = $("#item5"); // will contain all parents and the starting DOM element
var parent = all_parents.parent(); // a jQuery object, not a DOM element
while(parent[0].id != "container") {
all_parents = all_parents.add(parent);
parent = parent.parent();
}
$("#console").append("Parents: ");
all_parents.each(function() { $("#console").append(this.id + ' ') });
all_parents.css('background-color','yellow');
});
mehdi7376 (14) [Avatar] Offline
#6
Re: Selecting parent childs up to a given point!
Well, thank you for your efforts. However, I was hoping to get the collection without iterating through the elements, explicitly. For example, the parents() method does return the parent elements I need, however, I've got no idea how to filter elements that have been placed in the HTML above the "container" from the result collection.

Off Topic: What's the official way of "creating a new" wrapped set that doesn't contain any element? For example, $('a_really_creazy_name') works, but it's a little bit awkward...
mraj (104) [Avatar] Offline
#7
Re: Selecting parent childs up to a given point!
> Well, thank you for your efforts. However, I was
> hoping to get the collection without iterating
> through the elements, explicitly. For example, the
> parents() method does return the parent elements I
> need, however, I've got no idea how to filter
> elements that have been placed in the HTML above the
> "container" from the result collection.

Ok, try this:
$("#item5").parents().not($("#container").parents().add("#container"));

Get all the parents of item5, then remove 'all the parents of container' and 'container'.

Another way to write this:
$("#item5").parents().not($("#container")).not($("#container").parents());
mraj (104) [Avatar] Offline
#8
Re: Selecting parent childs up to a given point!
> Off Topic: What's the official way of "creating a
> new" wrapped set that doesn't contain any element?
> For example, $('a_really_creazy_name') works, but
> it's a little bit awkward...

$([])

I don't know if it's the "official way" though.

Message was edited by:
mraj

Ok, it is official: http://www.nabble.com/Re%3A-Creating-an-empty-jQuery-object-p9010479.html