How to Select element with class, but EXCLUDE its children?

[jmatthews]

I am manipulating a style on elements with class="House" or "Senate."
Unfortunately, it sets the style for every child underneath.

The tree is like this:

AL
   House of Representatives
      Member
      Member
      Member
   Senate
      Member
      Member
      Member

House has class="House."  Senate has class="Senate."  This is just the
label next to a checkbox that either says "House of Representatives"
or "Senate."  I am using that label for a mouseover function, where
the label turns blue and is italicized for clicking.

Beneath this are all the Representatives or Senators, as children of
the previous element with class="House" or "Senate."

So, now, when I mouse over any of the children, they italicize as
well.

This occurs due to my command that says $(".House,.Senate").mouseover
(function().....

I need something to control only the top level, e.g. $
(".House,.Senate"(but not their children)....

Does anyone know the way to do this?

[waseem sabjee]

give the elements childrent a class called : "nomralffont"

with the following css

.normalfont {

 font-weight:normal!important;

}

this is just an example

you may went to give them a different style but use the !important

On Fri, Oct 30, 2009 at 12:31 PM, jmatthews <jmatthews@...> wrote:

I am manipulating a style on elements with class="House" or "Senate."
Unfortunately, it sets the style for every child underneath.

The tree is like this:

AL
  House of Representatives
     Member
     Member
     Member
  Senate
     Member
     Member
     Member

House has class="House."  Senate has class="Senate."  This is just the
label next to a checkbox that either says "House of Representatives"
or "Senate."  I am using that label for a mouseover function, where
the label turns blue and is italicized for clicking.

Beneath this are all the Representatives or Senators, as children of
the previous element with class="House" or "Senate."

So, now, when I mouse over any of the children, they italicize as
well.

This occurs due to my command that says $(".House,.Senate").mouseover
(function().....

I need something to control only the top level, e.g. $
(".House,.Senate"(but not their children)....

Does anyone know the way to do this?

[jmatthews]

Thanks, I tried it. It turns out that !important gives precedence to a
property that has been later trumped by a more proximate designation.

In my app., ".placemark" will be a class of items below state with
id="AL."

I was able to control it in CSS to where ONLY the parent's attributes
do not apply to them.

.placemark
{
font-size:12px;
margin-left:5px;
padding:0;
color: black;
font-style: normal;
cursor: default;
text-decoration: none;
}


However, the jquery mouseover/mouseout is not working.  If I mouseover
a placemark (which is a child of state), I want placemark to turn
blue, but I want no effect on parent.  If I mouseover parent, I want
only parent to turn blue and not any placemarks.

It seems all the logic is there, so I don't know why my mouseover/
mouseout is not working.

$(".placemark").mouseover(function()
{
    $(this).css({ "color" : "blue!important"});

}).mouseout(function()
    $(this).css({ "color" : "black!important"});
});

[jmatthews]

Okay.  The problem is now this:

The children are wholly contained within individual divs encapsulated
by parent, as follows:

<div>state
    <div>child</div>
    <div><child2></div>
</div>

When I mouseover a child, it is thinking it is just the contents of
parent.  I need to restrict mouseover to children only, regardless of
the fact that they are encapsulated by parent.

I hope that makes sense.

[Scott Sauyet-2]

On Oct 30, 9:30 am, jmatthews <jmatth...@...> wrote:
> When I mouseover a child, it is thinking it is just the contents of
> parent.  I need to restrict mouseover to children only, regardless of
> the fact that they are encapsulated by parent.

You might want to look at the mouseenter and mouseleave events.

    http://docs.jquery.com/Events/mouseenter

-- Scott

[jmatthews]

I tried them as the description in the reference was not clear as to
why it would be useful.

It doesn't solve the problem.  That it does is make sure that if you
reached the child by entering over the parent, the child event will be
released only by exiting back over the parent.

Kind of odd.....

On Oct 30, 2:16 pm, Scott Sauyet <scott.sau...@...> wrote:

> On Oct 30, 9:30 am, jmatthews <jmatth...@...> wrote:
>
> > When I mouseover a child, it is thinking it is just the contents of
> > parent.  I need to restrict mouseover to children only, regardless of
> > the fact that they are encapsulated by parent.
>
> You might want to look at the mouseenter and mouseleave events.
>
>    http://docs.jquery.com/Events/mouseenter
>
> -- Scott

[Karl Swedberg-2]

I'd stick with what Scott said. Use mouseenter/mouseleave. But instead of setting the style with .css(), just add and remove a class. Here is a demo:

http://jsbin.com/enero/edit

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Oct 30, 2009, at 4:26 PM, jmatthews wrote:

I tried them as the description in the reference was not clear as to
why it would be useful.

It doesn't solve the problem.  That it does is make sure that if you
reached the child by entering over the parent, the child event will be
released only by exiting back over the parent.

Kind of odd.....

On Oct 30, 2:16 pm, Scott Sauyet <scott.sau...@...> wrote:

On Oct 30, 9:30 am, jmatthews <jmatth...@...> wrote:

When I mouseover a child, it is thinking it is just the contents of

parent.  I need to restrict mouseover to children only, regardless of

the fact that they are encapsulated by parent.

You might want to look at the mouseenter and mouseleave events.

   http://docs.jquery.com/Events/mouseenter

-- Scott

[javier87]

HOW DO I GET OUT OF THIS LIST? !

2009/11/1 Karl Swedberg <karl@...>

I'd stick with what Scott said. Use mouseenter/mouseleave. But instead of setting the style with .css(), just add and remove a class. Here is a demo:

http://jsbin.com/enero/edit

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Oct 30, 2009, at 4:26 PM, jmatthews wrote:

I tried them as the description in the reference was not clear as to
why it would be useful.

It doesn't solve the problem.  That it does is make sure that if you
reached the child by entering over the parent, the child event will be
released only by exiting back over the parent.

Kind of odd.....

On Oct 30, 2:16 pm, Scott Sauyet <scott.sau...@...> wrote:

On Oct 30, 9:30 am, jmatthews <jmatth...@...> wrote:

When I mouseover a child, it is thinking it is just the contents of

parent.  I need to restrict mouseover to children only, regardless of

the fact that they are encapsulated by parent.

You might want to look at the mouseenter and mouseleave events.

   http://docs.jquery.com/Events/mouseenter

-- Scott

--
Un Abrazo
Marcos J. Riganti
[phone]
webmaster@...

[jmatthews]

I tried that, too.

This is some bizarre behavior.  It is not at all what you would
predict.

Let me show you the Firebug-generated html tree below.

<td class="Senate" style="font-size: 12px; color: black; font-style:
normal; text-decoration: none; cursor: default; border-spacing: 0pt;">
Senate
     <table>
        <tbody>
           <tr>
               <td id="ALSenatePlacemarks"
class="outerTableForPlacemarksTable">
                    <table class="placemarkTable">
                        <tbody>
                            <tr class="placemarkTableRow">
                                <td class="marginSpaceBeforeCheckBox"/
>
                                <td class="dottedCheckBoxColumn"></td>
                                <td class="checkBoxColumn"></td>
                                <td class="placemark">Lowell Ray
Barron</td>
                            </tr>
                            <tr class="placemarkTableRow"></tr>
                            <tr class="placemarkTableRow"></tr>
                            <tr class="placemarkTableRow">
                            etc....

This is a series of nested tables, and the nesting is pretty deep, due
to html acting goofy.  I had to nest that deep to get it to work.

Mousing over class="placemark" causes it to fire as if there was a
mouseover on class="Senate."  "placemark" has its own class, separate
from the "senate" class.


To see this in action, here is the link.
http://www.sovereignstates.net/StateLegislators/VSLegislators.htm

It requires the Google Earth API and will prompt you to load it.
(It's nice to have, as GE is no longer just a desktop-restricted thing
anymore).

After the Google API installs, the page should load.  The initial load
is slow because it is a map with lots of point data.  You should see
the US come up with colored states.  Once it has loaded the first
time, subsequent loads will be fast as it stays in the browser  cache.

Click on the Alabama Senate.  It will open a scroll within the scroll
on the left, showing Alabama's senator's names.  When you mouse over
senator names, the system interprets that as ALSO a mouseover the
"Senate" label at the top.  This should not be the case.

In any event, the senator names are, quite literally, great-great-
great-great grandchildren of the "Senate" label.  How on earth would
mousing over the gggg grandchild be the same as mousing over its
ascendant 6 generations above?

The only thing I can think of is the mouseover (including mouseleave)
thinks these are equivalent because the gggg grandchildren are seen as
the innerhtml of the "Senate" label.

Thanks to all of you who have tried to help.

This is really perplexing, and once it is solved, there needs to be a
monument set up for the person who solves it.  Seriously, though, the
issue, once resolved, would be worthy of a write-up in the reference
guide, because there is some odd behavior occurring that Jquery fails
to describe anywhere that I have seen.

Also, if you are on your toes, you will note that the senator names
italicize, but do not turn blue, when you mouseover them.  So, it is
somehow (God knows!) getting PART of the class of the gggg
grandchild.  The placemark class instructs to not italicize and not
turn blue.  So, it does not turn blue (good), but it does italicizes
(bad).

[Andrei Eftimie]

I'm installing GE now, but it would be great if you could create a
sample test-page to highlight this particular behaviour.
(and exclude everything else from that page, for easier further testing).

On Sun, Nov 1, 2009 at 6:37 PM, jmatthews <jmatthews@...> wrote:

> I tried that, too.
>
> This is some bizarre behavior.  It is not at all what you would
> predict.
>
> Let me show you the Firebug-generated html tree below.
>
> <td class="Senate" style="font-size: 12px; color: black; font-style:
> normal; text-decoration: none; cursor: default; border-spacing: 0pt;">
> Senate
>     <table>
>        <tbody>
>           <tr>
>               <td id="ALSenatePlacemarks"
> class="outerTableForPlacemarksTable">
>                    <table class="placemarkTable">
>                        <tbody>
>                            <tr class="placemarkTableRow">
>                                <td class="marginSpaceBeforeCheckBox"/
>>
>                                <td class="dottedCheckBoxColumn"></td>
>                                <td class="checkBoxColumn"></td>
>                                <td class="placemark">Lowell Ray
> Barron</td>
>                            </tr>
>                            <tr class="placemarkTableRow"></tr>
>                            <tr class="placemarkTableRow"></tr>
>                            <tr class="placemarkTableRow">
>                            etc....
>
> This is a series of nested tables, and the nesting is pretty deep, due
> to html acting goofy.  I had to nest that deep to get it to work.
>
> Mousing over class="placemark" causes it to fire as if there was a
> mouseover on class="Senate."  "placemark" has its own class, separate
> from the "senate" class.
>
>
> To see this in action, here is the link.
> http://www.sovereignstates.net/StateLegislators/VSLegislators.htm
>
> It requires the Google Earth API and will prompt you to load it.
> (It's nice to have, as GE is no longer just a desktop-restricted thing
> anymore).
>
> After the Google API installs, the page should load.  The initial load
> is slow because it is a map with lots of point data.  You should see
> the US come up with colored states.  Once it has loaded the first
> time, subsequent loads will be fast as it stays in the browser  cache.
>
> Click on the Alabama Senate.  It will open a scroll within the scroll
> on the left, showing Alabama's senator's names.  When you mouse over
> senator names, the system interprets that as ALSO a mouseover the
> "Senate" label at the top.  This should not be the case.
>
> In any event, the senator names are, quite literally, great-great-
> great-great grandchildren of the "Senate" label.  How on earth would
> mousing over the gggg grandchild be the same as mousing over its
> ascendant 6 generations above?
>
> The only thing I can think of is the mouseover (including mouseleave)
> thinks these are equivalent because the gggg grandchildren are seen as
> the innerhtml of the "Senate" label.
>
> Thanks to all of you who have tried to help.
>
> This is really perplexing, and once it is solved, there needs to be a
> monument set up for the person who solves it.  Seriously, though, the
> issue, once resolved, would be worthy of a write-up in the reference
> guide, because there is some odd behavior occurring that Jquery fails
> to describe anywhere that I have seen.
>
> Also, if you are on your toes, you will note that the senator names
> italicize, but do not turn blue, when you mouseover them.  So, it is
> somehow (God knows!) getting PART of the class of the gggg
> grandchild.  The placemark class instructs to not italicize and not
> turn blue.  So, it does not turn blue (good), but it does italicizes
> (bad).
>
>

--
Andrei Eftimie
http://eftimie.com
[phone]

Punct
http://designpunct.ro

[Andrei Eftimie]

> Mousing over class="placemark" causes it to fire as if there was a
> mouseover on class="Senate."  "placemark" has its own class, separate
> from the "senate" class.

This behaviour is actually the way it supposed to be.
mouseover and mouseout fire on each entering / exiting of the elements
and ever element descendants border.

You would want mouseenter and mouseleave to fire *only* on the trigger
element, and ignore its descendants.



> Click on the Alabama Senate.  It will open a scroll within the scroll
> on the left, showing Alabama's senator's names.  When you mouse over
> senator names, the system interprets that as ALSO a mouseover the
> "Senate" label at the top.  This should not be the case.

See above.

> In any event, the senator names are, quite literally, great-great-
> great-great grandchildren of the "Senate" label.  How on earth would
> mousing over the gggg grandchild be the same as mousing over its
> ascendant 6 generations above?

Not sure on the specific details right now, but check
http://www.quirksmode.org/js/events_mouse.html for an explanation.

> Also, if you are on your toes, you will note that the senator names
> italicize, but do not turn blue, when you mouseover them.  So, it is
> somehow (God knows!) getting PART of the class of the gggg
> grandchild.  The placemark class instructs to not italicize and not
> turn blue.  So, it does not turn blue (good), but it does italicizes
> (bad).

Not sure, but I think this is actually because table element does only
inherit some css properties.
(At least I remember it does so in quirksmode)



--
Andrei Eftimie
http://eftimie.com
[phone]

Punct
http://designpunct.ro

[jmatthews]

On Nov 1, 10:54 am, Andrei Eftimie <k3liu...@...> wrote:

> > Mousing over class="placemark" causes it to fire as if there was a
> > mouseover on class="Senate."  "placemark" has its own class, separate
> > from the "senate" class.
>
> This behaviour is actually the way it supposed to be.
> mouseover and mouseout fire on each entering / exiting of the elements
> and ever element descendants border.
>
> You would want mouseenter and mouseleave to fire *only* on the trigger
> element, and ignore its descendants.
>

Andrei, if this is the desired behavior, I don't understand why it
should be.  The way I see it is, to use a simpler example:

<body class="class1">Goodbye
<div class="class2">Hello.</div>
</body>

$(".class1").onmouseover(....

$(".class2").onmouseover(....

So, when you mouever class2, it is pretty much pointless, because it
fires as if you mouse over class1.

[jmatthews]

BTW, Andrei.  Now that the map stuff loaded, the next time you load
the page, it should be pretty quick.

If not, let me know.

[Andrei Eftimie]

I understand where you come from. My exprimation was somewhat off.
Please replace with desired with *implemented* or
*the-way-it-actually-works-in-browsers*.

Not sure if it is intended or just the way it is working with now.
Please check the links from quirksmode for further details.

On Sun, Nov 1, 2009 at 7:21 PM, jmatthews <jmatthews@...> wrote:

>
>
> On Nov 1, 10:54 am, Andrei Eftimie <k3liu...@...> wrote:
>> > Mousing over class="placemark" causes it to fire as if there was a
>> > mouseover on class="Senate."  "placemark" has its own class, separate
>> > from the "senate" class.
>>
>> This behaviour is actually the way it supposed to be.
>> mouseover and mouseout fire on each entering / exiting of the elements
>> and ever element descendants border.
>>
>> You would want mouseenter and mouseleave to fire *only* on the trigger
>> element, and ignore its descendants.
>>
>
>
> Andrei, if this is the desired behavior, I don't understand why it
> should be.  The way I see it is, to use a simpler example:
>
> <body class="class1">Goodbye
> <div class="class2">Hello.</div>
> </body>
>
> $(".class1").onmouseover(....
>
> $(".class2").onmouseover(....
>
> So, when you mouever class2, it is pretty much pointless, because it
> fires as if you mouse over class1.
>

--
Andrei Eftimie
http://eftimie.com
[phone]

Punct
http://designpunct.ro

[jmatthews]

BTW, Andrei.  Now that the map stuff loaded, the next time you load
the page, it should be pretty quick.

If not, let me know.

[jmatthews]

BTW, Andrei.  Now that the map stuff loaded, the next time you load
the page, it should be pretty quick.

If not, let me know.

[jmatthews]

Andrei, I think you've hit it!

I really don't quite understand the quirksmode material as well as you
veteran programmers, but I can tell this is the crux of the issue and
how to handle it. It has to do with handling fromElement and
relatedTarget.

Do you think you could assist with this in order to derive the proper
mouseover/mouseout jquery syntax indcorporating the relatedTarget and
fromElement properties described in quirksmode?


Here is a portion of the quirksmode article that is discussing the
issue:


\
Cross–browser scripts

So if you want to know where the mouse comes from in case of
mouseover, do:

function doSomething(e) {
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.fromElement;
}

If you want to know where the mouse goes to in case of mouseout, do:

[jmatthews]

Andrei, I think you've hit it!

I really don't quite understand the quirksmode material as well as you
veteran programmers, but I can tell this is the crux of the issue and
how to handle it. It has to do with handling fromElement and
relatedTarget.

Do you think you could assist with this in order to derive the proper
mouseover/mouseout jquery syntax indcorporating the relatedTarget and
fromElement properties described in quirksmode?


Here is a portion of the quirksmode article that is discussing the
issue:


\
Cross–browser scripts

So if you want to know where the mouse comes from in case of
mouseover, do:

function doSomething(e) {
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.fromElement;
}

If you want to know where the mouse goes to in case of mouseout, do:

[jmatthews]

Andrei, I think you've hit it!

I really don't quite understand the quirksmode material as well as you
veteran programmers, but I can tell this is the crux of the issue and
how to handle it. It has to do with handling fromElement and
relatedTarget.

Do you think you could assist with this in order to derive the proper
mouseover/mouseout jquery syntax indcorporating the relatedTarget and
fromElement properties described in quirksmode?


Here is a portion of the quirksmode article that is discussing the
issue:


\
Cross–browser scripts

So if you want to know where the mouse comes from in case of
mouseover, do:

function doSomething(e) {
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.fromElement;
}

If you want to know where the mouse goes to in case of mouseout, do:

[jmatthews]

Andrei, I think you've hit it!

I really don't quite understand the quirksmode material as well as you
veteran programmers, but I can tell this is the crux of the issue and
how to handle it. It has to do with handling fromElement and
relatedTarget.

Do you think you could assist with this in order to derive the proper
mouseover/mouseout jquery syntax indcorporating the relatedTarget and
fromElement properties described in quirksmode?


Here is a portion of the quirksmode article that is discussing the
issue:


\
Cross–browser scripts

So if you want to know where the mouse comes from in case of
mouseover, do:

function doSomething(e) {
        if (!e) var e = window.event;
        var relTarg = e.relatedTarget || e.fromElement;
}

If you want to know where the mouse goes to in case of mouseout, do: