#5 — More relative selectors
State | Unconfirmed |
---|---|
Release: |
—
|
Area | Client side framework and general |
Issue type | Feature |
Severity | Medium |
Submitted by | Danny Bloemendaal |
Submitted on | 2007-06-28 |
Responsible |
—
|
Target release: |
—
|
Last modified on
2007-06-28
by
Danny Bloemendaal
It would be handy to have more relative selectors like parentnode():
sibblingNode, nextSibblingNode, prevSibblingNode, firstChild, lastChild, firstSibbling, lastSibbling etc.
Probably quite easy to implement allow you to have more control instead of doing everything with id-ed elements.
sibblingNode, nextSibblingNode, prevSibblingNode, firstChild, lastChild, firstSibbling, lastSibbling etc.
Probably quite easy to implement allow you to have more control instead of doing everything with id-ed elements.
Added by
Danny Bloemendaal
on
2007-06-28 14:05
Ok, i discussed this with godefroid and we came to the conclusion that parentnode() can accept child/sibbling selectors like in parentnode('tr:...') where it searches up the tree for the first tr node (or #id or .class) and then applies the child or sibling selectors like in css.
Here is the irc transcript:
ender_ __gotcha: I have an input:click that's inside a td and I want to toggle a class on a sibble td. Is that possible?
11:05
s/closs/class
__gotchaon the phonr
11:05
11:05
1 sec
ender_can toggle the class on the parent <tr> of course..
11:05
11:06
ender_is just curious cause at several moments he wanted to be able to address siblings instead of parents
11:06
(or children)
__gotcha
11:07
toggleClass should accept any css selector
11:07
I have forgotten the syntax
11:07
gimme two secs
ender_
11:08
i mean like:
11:08
-kssSelector: nextSibbling(..)
11:08
or firstChild, lastChild, previousSibbling, lastSibbling
11:09
the common stuff you find in prototype and mootools for getting access to nodes relative to a given one.
__gotcha
11:14
we currently do not have those same stuff
11:14
you have two directions :
11:15
or use stuff like h1 + h2 css selectors
11:15
in -kssSelector:css("h1 + h2")
11:15
or do js and register new selectors
11:16
iow, help us improve the framework
11:17
ender_:
ender_
11:17
__gotcha
11:20
ender_: the js included would be quite simple
11:20
iow, should be easy to add those stuff
ender_
11:21
probably yeah.. i'll start with just adding the issue in the tracker so we don't forget
__gotcha
11:21
ender_: good point
11:23
ender_: please do not hesitate to report about your experience with the stuff
ender_
11:23
yep
__gotcha
11:23
we need feedback
ender_
11:23
i'm really really happy with kss
11:23
the only think I do not really like (but that's not kss' fault) is the classitis.
11:24
You have to use classes on so many nodes just to deal with states
__gotcha
11:24
right
ender_
11:24
and that's in essence a missuse of the class attribute
__gotcha
11:24
There is an idea in the pipeline to avoid this
ender_
11:24
but other than that, it's great
__gotcha
11:25
where we would store state on nodes and give access to it in selectors
11:25
without using class
11:25
but we need to think more and implement
ender_
11:25
yes..
11:26
maybe allow to annotate whatever you want on nodes
__gotcha
11:29
ender_: back to your sibling/children stuff
11:29
you should try :nth-child()
11:29
:first-child
11:29
:last-child
ender_
11:29
yes.,. but that's not relative to the current node that received the click event
__gotcha
11:30
cssQuery support some of those
ender_
11:30
oh
__gotcha
11:30
iow kss as well
ender_
11:30
so if i have table, tr, td td td... and the second td received the click and I want to toggle the state for the last td.. how would you do that?
__gotcha
11:31
I think you would do table tr:last-child
ender_
11:31
in js I would do something like: (suppose the button is inside the 2nd td): parentnode().parentnode().lastChihld() or parentNode().nextSibbling()
11:32
no.. the table can have loads of tr rows
11:32
so you still need the current row
__gotcha
11:32
tr have ids or class info on them, right ?
ender_
11:33
well, that's my point.. you can do it with id's but that's the nice thing about relative selectors.. you don't need ids which makes the markup a bit better.
__gotcha
11:34
brb
__gotcha
11:35
back
11:36
ender_: can you explain you use case, (not implementation) a bit ?
ender_
11:39
well, i many sitatuations you have generated markup (lists based on search results) and these lists of course consist of repeating markup (like table rows with cells).. So instead of loading the markup full of all kinds of classes and ids, you can access elements in these repeating markup blocks by using relative selectors.. So, usually you know, that for instance the element you want to control is in a node relative to the current node that received the event (like a button in cell A controlls something in cell B which is it's next sibbling).
11:39
I just makes it easier I guess
__gotcha
11:39
ender_: I want to understand why you need to access those relative nodes
11:40
to see if there are no other patterns to use
11:40
iow, kss way of doing it
11:40
even now
ender_
11:41
well, in my case I have a table row with in the first cell a checkbox, when I click that box, I want to do something with a div inside a sibbling row cell. (like opening or closing or applying some effect on it).
11:41
so right now I have to toggle a closs on the tr to be able to do that
11:41
I cannot get a grip of that inner div inside the sibbling td
11:42
so if the input (checkbox) receives a click: I want to do something like this: toggleClass(parentnode().nextsbbling())
__gotcha
11:42
iow, this is no ajax
11:42
but dhtml, rigth ?
ender_
11:42
ehm.. yes
__gotcha
11:42
just to be sure I understand
ender_
11:43
but if you can access this div..it would be nice to pass along the 'node' to a server method which can fill this div with content
11:43
ender_shrugs
__gotcha
11:44
ender_: if you want to go to the server in the end, then I'd replace the whole row
ender_
11:44
or do the same on the server to do something with this div
__gotcha
11:44
intsead of just the div
11:44
and if you need to do stuff on the server, you need a way to identify this row anyway, right ?
ender_
11:45
well, not if the user may have done something with that row (like openeing or closing sections or entering info in a form.) in that case you don't want to replace the html.. on the contrary!!
__gotcha
11:45
good point
ender_
11:45
in that case you only want to control that particular node (the div in my example)
__gotcha
11:46
the question is to find a way to express to relative stuff without creating too complex api
11:47
iow, I'd rather sthing like -kssSelector('first-sibling')
11:47
oops
ender_
11:47
right now I have such a situation at hand: i have a list of issues (in an issue tracker) and each issue is a row in a table.. and each issue title has an info icon next to it that opens a div under the title and fils the div with the issue's metadata. on the left of the issue is a checkbox.. if you click that, a tiny close form is loaded from the server that the user can fill in to close the form. These metadata box and close form are seperate things that need to be controlled separatedly.
__gotcha
11:47
kssSelector:relative('first-sibling')
11:47
kssSelector:relative('last-sibling')
11:48
rather than kssSelector:firstSibling()
11:48
kssSelector:lastSibling()
11:48
and so on
11:48
ender_: you mean to close the issue
ender_
11:49
well, what about this: kssSelector: parentnode('td').sibbling()
11:49
the 'td' parameter allows you to go up the chain and stop whenever you get at the td
11:49
but I see you point that it quickly becomes normal javascript that you do't want in your kss
11:50
yes, to close the issue, not the form ;-), typo
__gotcha
11:50
I am trying to understand the patterns
11:50
in order to improve the framework without getting back to js
11:51
which we might not succed in the end
11:51
ender_: I suppose each issue has an id for now, right ?
ender_
11:52
yes
11:52
and I just made it work with ids and classes and stuff with 'absolute' addressing of nodes using their ids
11:52
that works
11:52
of course
__gotcha
11:53
if the id is in a kssattr and we add string substitution in the selectors, we would get to what you need right ?
ender_
11:53
i know css3 has new selector types for siblings and stuff but not parents.. otherwise we could use that
11:54
mabye some descriptive way to describe the relative path
__gotcha
11:54
table tr#${kssAttr(id)} td:nth-child(3)
11:55
that would work right ?
11:55
iow a dynamic id in the selector
ender_
11:55
yes.. something like that but then for the table tr#.. you could use some parent notation
11:55
like parent(td):nth-child(3)
__gotcha
11:56
well I'd rather keep the usual css selector
ender_
11:56
or better: parent('...'):nth-child(3)
__gotcha
11:56
this way people can rely on what they know
ender_
11:56
yes. but css doesn't have something for parents
11:56
only childs, sibblings etc
11:56
so you already added a parentnod() function to deal with this
__gotcha
11:57
yes but if you can dynamically select the row with table tr#substituted_id
11:57
you do not need parent
ender_
11:57
parentnode("tr:nth-child(3)") ?
11:57
but my point is that you want to do it without using ids, only relative addressing
11:58
id's in some for or the other, always makes it absolute
__gotcha
11:58
ok you speak of the case where there are no ids
11:58
iow no communication with the server
ender_
11:58
could be yeas
11:58
you alrady can use the parentnode(..)
__gotcha
11:59
we can surely extend those selectors again and again
ender_
11:59
where .. is some class or id like: parentnode(#myid) or parentnode(.myclass) or parentnode(td)
__gotcha
11:59
I am just afraid it will explode
ender_
11:59
then you are almost done
11:59
you already have nearly all the means to do relative addressing:
__gotcha
11:59
but I think you are right
11:59
we are almost there
ender_
12:00
of the paremeter for parentnode allows child addressing and sibbling addressing as in css, then ur done
12:00
don't know the exact css selecting syntax but you can allow that as a parameter
__gotcha
12:01
that makes sense
ender_
12:01
parentnode('tr:<sibling selector syntax>")
12:01
the parentnode searches up the tree for the tr (or the #id or the .classname) and then applies the sibbling selector info
__gotcha
12:02
I like the direction you take
ender_
12:02
me too
__gotcha
12:02
can you add that to the issue
ender_
12:02
i'll add the transcript to the issue
Here is the irc transcript:
ender_ __gotcha: I have an input:click that's inside a td and I want to toggle a class on a sibble td. Is that possible?
11:05
s/closs/class
__gotchaon the phonr
11:05
11:05
1 sec
ender_can toggle the class on the parent <tr> of course..
11:05
11:06
ender_is just curious cause at several moments he wanted to be able to address siblings instead of parents
11:06
(or children)
__gotcha
11:07
toggleClass should accept any css selector
11:07
I have forgotten the syntax
11:07
gimme two secs
ender_
11:08
i mean like:
11:08
-kssSelector: nextSibbling(..)
11:08
or firstChild, lastChild, previousSibbling, lastSibbling
11:09
the common stuff you find in prototype and mootools for getting access to nodes relative to a given one.
__gotcha
11:14
we currently do not have those same stuff
11:14
you have two directions :
11:15
or use stuff like h1 + h2 css selectors
11:15
in -kssSelector:css("h1 + h2")
11:15
or do js and register new selectors
11:16
iow, help us improve the framework
11:17
ender_:
ender_
11:17
__gotcha
11:20
ender_: the js included would be quite simple
11:20
iow, should be easy to add those stuff
ender_
11:21
probably yeah.. i'll start with just adding the issue in the tracker so we don't forget
__gotcha
11:21
ender_: good point
11:23
ender_: please do not hesitate to report about your experience with the stuff
ender_
11:23
yep
__gotcha
11:23
we need feedback
ender_
11:23
i'm really really happy with kss
11:23
the only think I do not really like (but that's not kss' fault) is the classitis.
11:24
You have to use classes on so many nodes just to deal with states
__gotcha
11:24
right
ender_
11:24
and that's in essence a missuse of the class attribute
__gotcha
11:24
There is an idea in the pipeline to avoid this
ender_
11:24
but other than that, it's great
__gotcha
11:25
where we would store state on nodes and give access to it in selectors
11:25
without using class
11:25
but we need to think more and implement
ender_
11:25
yes..
11:26
maybe allow to annotate whatever you want on nodes
__gotcha
11:29
ender_: back to your sibling/children stuff
11:29
you should try :nth-child()
11:29
:first-child
11:29
:last-child
ender_
11:29
yes.,. but that's not relative to the current node that received the click event
__gotcha
11:30
cssQuery support some of those
ender_
11:30
oh
__gotcha
11:30
iow kss as well
ender_
11:30
so if i have table, tr, td td td... and the second td received the click and I want to toggle the state for the last td.. how would you do that?
__gotcha
11:31
I think you would do table tr:last-child
ender_
11:31
in js I would do something like: (suppose the button is inside the 2nd td): parentnode().parentnode().lastChihld() or parentNode().nextSibbling()
11:32
no.. the table can have loads of tr rows
11:32
so you still need the current row
__gotcha
11:32
tr have ids or class info on them, right ?
ender_
11:33
well, that's my point.. you can do it with id's but that's the nice thing about relative selectors.. you don't need ids which makes the markup a bit better.
__gotcha
11:34
brb
__gotcha
11:35
back
11:36
ender_: can you explain you use case, (not implementation) a bit ?
ender_
11:39
well, i many sitatuations you have generated markup (lists based on search results) and these lists of course consist of repeating markup (like table rows with cells).. So instead of loading the markup full of all kinds of classes and ids, you can access elements in these repeating markup blocks by using relative selectors.. So, usually you know, that for instance the element you want to control is in a node relative to the current node that received the event (like a button in cell A controlls something in cell B which is it's next sibbling).
11:39
I just makes it easier I guess
__gotcha
11:39
ender_: I want to understand why you need to access those relative nodes
11:40
to see if there are no other patterns to use
11:40
iow, kss way of doing it
11:40
even now
ender_
11:41
well, in my case I have a table row with in the first cell a checkbox, when I click that box, I want to do something with a div inside a sibbling row cell. (like opening or closing or applying some effect on it).
11:41
so right now I have to toggle a closs on the tr to be able to do that
11:41
I cannot get a grip of that inner div inside the sibbling td
11:42
so if the input (checkbox) receives a click: I want to do something like this: toggleClass(parentnode().nextsbbling())
__gotcha
11:42
iow, this is no ajax
11:42
but dhtml, rigth ?
ender_
11:42
ehm.. yes
__gotcha
11:42
just to be sure I understand
ender_
11:43
but if you can access this div..it would be nice to pass along the 'node' to a server method which can fill this div with content
11:43
ender_shrugs
__gotcha
11:44
ender_: if you want to go to the server in the end, then I'd replace the whole row
ender_
11:44
or do the same on the server to do something with this div
__gotcha
11:44
intsead of just the div
11:44
and if you need to do stuff on the server, you need a way to identify this row anyway, right ?
ender_
11:45
well, not if the user may have done something with that row (like openeing or closing sections or entering info in a form.) in that case you don't want to replace the html.. on the contrary!!
__gotcha
11:45
good point
ender_
11:45
in that case you only want to control that particular node (the div in my example)
__gotcha
11:46
the question is to find a way to express to relative stuff without creating too complex api
11:47
iow, I'd rather sthing like -kssSelector('first-sibling')
11:47
oops
ender_
11:47
right now I have such a situation at hand: i have a list of issues (in an issue tracker) and each issue is a row in a table.. and each issue title has an info icon next to it that opens a div under the title and fils the div with the issue's metadata. on the left of the issue is a checkbox.. if you click that, a tiny close form is loaded from the server that the user can fill in to close the form. These metadata box and close form are seperate things that need to be controlled separatedly.
__gotcha
11:47
kssSelector:relative('first-sibling')
11:47
kssSelector:relative('last-sibling')
11:48
rather than kssSelector:firstSibling()
11:48
kssSelector:lastSibling()
11:48
and so on
11:48
ender_: you mean to close the issue
ender_
11:49
well, what about this: kssSelector: parentnode('td').sibbling()
11:49
the 'td' parameter allows you to go up the chain and stop whenever you get at the td
11:49
but I see you point that it quickly becomes normal javascript that you do't want in your kss
11:50
yes, to close the issue, not the form ;-), typo
__gotcha
11:50
I am trying to understand the patterns
11:50
in order to improve the framework without getting back to js
11:51
which we might not succed in the end
11:51
ender_: I suppose each issue has an id for now, right ?
ender_
11:52
yes
11:52
and I just made it work with ids and classes and stuff with 'absolute' addressing of nodes using their ids
11:52
that works
11:52
of course
__gotcha
11:53
if the id is in a kssattr and we add string substitution in the selectors, we would get to what you need right ?
ender_
11:53
i know css3 has new selector types for siblings and stuff but not parents.. otherwise we could use that
11:54
mabye some descriptive way to describe the relative path
__gotcha
11:54
table tr#${kssAttr(id)} td:nth-child(3)
11:55
that would work right ?
11:55
iow a dynamic id in the selector
ender_
11:55
yes.. something like that but then for the table tr#.. you could use some parent notation
11:55
like parent(td):nth-child(3)
__gotcha
11:56
well I'd rather keep the usual css selector
ender_
11:56
or better: parent('...'):nth-child(3)
__gotcha
11:56
this way people can rely on what they know
ender_
11:56
yes. but css doesn't have something for parents
11:56
only childs, sibblings etc
11:56
so you already added a parentnod() function to deal with this
__gotcha
11:57
yes but if you can dynamically select the row with table tr#substituted_id
11:57
you do not need parent
ender_
11:57
parentnode("tr:nth-child(3)") ?
11:57
but my point is that you want to do it without using ids, only relative addressing
11:58
id's in some for or the other, always makes it absolute
__gotcha
11:58
ok you speak of the case where there are no ids
11:58
iow no communication with the server
ender_
11:58
could be yeas
11:58
you alrady can use the parentnode(..)
__gotcha
11:59
we can surely extend those selectors again and again
ender_
11:59
where .. is some class or id like: parentnode(#myid) or parentnode(.myclass) or parentnode(td)
__gotcha
11:59
I am just afraid it will explode
ender_
11:59
then you are almost done
11:59
you already have nearly all the means to do relative addressing:
__gotcha
11:59
but I think you are right
11:59
we are almost there
ender_
12:00
of the paremeter for parentnode allows child addressing and sibbling addressing as in css, then ur done
12:00
don't know the exact css selecting syntax but you can allow that as a parameter
__gotcha
12:01
that makes sense
ender_
12:01
parentnode('tr:<sibling selector syntax>")
12:01
the parentnode searches up the tree for the tr (or the #id or the .classname) and then applies the sibbling selector info
__gotcha
12:02
I like the direction you take
ender_
12:02
me too
__gotcha
12:02
can you add that to the issue
ender_
12:02
i'll add the transcript to the issue