Greenhorn with starterkit question...

[karlkras]

Hey,
So I'm using the starterkit to go through the basics with jQuery and
had a question on the expected behavior of this function:
 $(document).ready(function() {
   $("li").not(":has(ul)").css("border", "1px solid black");
 });

Isn't this saying:
Select all <li> elements, if the li element is not contained in an
<ul> then apply the style.
If so, then this doesn't appear to be working properly in the
starterkit.html
e.g., if I add this to the page:

    <ul id="bulletlist">
        <li>First element</li>
        <li>Second element</li>
        <li>Third element</li>
    </ul>

wouldn't the .not be applied to ul and therefore in this case the
style shouldn't be applied? This isn't what I'm seeing.

thanks,
K

[Michel Belleville]

It's not saying what you want, instead it's saying :

• $("li") get all li
• .not(":has(ul)") keep only those that don't contain any ul

You might prefer something on the lines of :
$("li").not("ul li")

Which says :

• $("li") get all li
• .not("ul li") don't keep those that have ul for ancestor
  

Michel Belleville

2009/11/6 karlkras <karlkras@...>

Hey,
So I'm using the starterkit to go through the basics with jQuery and
had a question on the expected behavior of this function:
 $(document).ready(function() {
  $("li").not(":has(ul)").css("border", "1px solid black");
 });

Isn't this saying:
Select all <li> elements, if the li element is not contained in an
<ul> then apply the style.
If so, then this doesn't appear to be working properly in the
starterkit.html
e.g., if I add this to the page:

   <ul id="bulletlist">
       <li>First element</li>
       <li>Second element</li>
       <li>Third element</li>
   </ul>

wouldn't the .not be applied to ul and therefore in this case the
style shouldn't be applied? This isn't what I'm seeing.

thanks,
K

[karlkras]

Hi Michael,

Hmm, okay. I guess, but I'm not getting what the intent of the example
is. My explanation of what it should do is my best guess since I
didn't publish it, I'm simply an ignorant bystander.

In your interpretation, what would "don't contain any ul" mean?
Contained how? Under what syntax would an li contain a ul ?

I also attempted changing the .not clause as you recommended to
suppress li formatting that had <ul> ancestors and that didn't seem to
have an effect either. Of course my interpretation of what is and is
not working could be completely off base since I'm not sure what the
author (Jörn Zaefferer) had in mind here, and here is where he
suggested questions in concern should be posted.

thanks for the assistance,
K2

On Nov 5, 11:19 pm, Michel Belleville <michel.bellevi...@...>
wrote:

> It's not saying what you want, instead it's saying :
>
>    - $("li") get all li
>    - .not(":has(ul)") keep only those that don't contain any ul
>
> You might prefer something on the lines of :
> $("li").not("ul li")
>
> Which says :
>
>    - $("li") get all li
>    - .not("ul li") don't keep those that have ul for ancestor
>
> Michel Belleville
>
> 2009/11/6 karlkras <karlk...@...>
>
> > Hey,
> > So I'm using the starterkit to go through the basics with jQuery and
> > had a question on the expected behavior of this function:
> >  $(document).ready(function() {
> >   $("li").not(":has(ul)").css("border", "1px solid black");
> >  });
>
> > Isn't this saying:
> > Select all <li> elements, if the li element is not contained in an
> > <ul> then apply the style.
> > If so, then this doesn't appear to be working properly in the
> > starterkit.html
> > e.g., if I add this to the page:
>
> >    <ul id="bulletlist">
> >        <li>First element</li>
> >        <li>Second element</li>
> >        <li>Third element</li>
> >    </ul>
>
> > wouldn't the .not be applied to ul and therefore in this case the
> > style shouldn't be applied? This isn't what I'm seeing.
>
> > thanks,
> > K

[Karl Swedberg-2]

An <li> could contain a <ul> in a nested list:

<ul>
        <li>item 1</li>
        <li>item 2
                <ul>
                        <li>sub-item 2.1</li>
                        <li>sub-item 2.2</li>
                </ul>
        </li>
        <li>item 3</li>
<ul>

So, this line:
   $("li").not(":has(ul)").css("border", "1px solid black");

...would select the first and third top-level <li>, but not the  
second. It would also select the two "sub items."  The second top-
level "li" has a "ul."

--Karl

_________________
Karl Swedberg


On Nov 6, 2009, at 3:42 PM, karlkras wrote:

> Hi Michael,
>
> Hmm, okay. I guess, but I'm not getting what the intent of the example
> is. My explanation of what it should do is my best guess since I
> didn't publish it, I'm simply an ignorant bystander.
>
> In your interpretation, what would "don't contain any ul" mean?
> Contained how? Under what syntax would an li contain a ul ?
>
> I also attempted changing the .not clause as you recommended to
> suppress li formatting that had <ul> ancestors and that didn't seem to
> have an effect either. Of course my interpretation of what is and is
> not working could be completely off base since I'm not sure what the
> author (Jörn Zaefferer) had in mind here, and here is where he
> suggested questions in concern should be posted.
>
> thanks for the assistance,
> K2
>
> On Nov 5, 11:19 pm, Michel Belleville <michel.bellevi...@...>
> wrote:
>> It's not saying what you want, instead it's saying :
>>
>>    - $("li") get all li
>>    - .not(":has(ul)") keep only those that don't contain any ul
>>
>> You might prefer something on the lines of :
>> $("li").not("ul li")
>>
>> Which says :
>>
>>    - $("li") get all li
>>    - .not("ul li") don't keep those that have ul for ancestor
>>
>> Michel Belleville
>>
>> 2009/11/6 karlkras <karlk...@...>
>>
>>> Hey,
>>> So I'm using the starterkit to go through the basics with jQuery and
>>> had a question on the expected behavior of this function:
>>>  $(document).ready(function() {
>>>   $("li").not(":has(ul)").css("border", "1px solid black");
>>>  });
>>
>>> Isn't this saying:
>>> Select all <li> elements, if the li element is not contained in an
>>> <ul> then apply the style.
>>> If so, then this doesn't appear to be working properly in the
>>> starterkit.html
>>> e.g., if I add this to the page:
>>
>>>    <ul id="bulletlist">
>>>        <li>First element</li>
>>>        <li>Second element</li>
>>>        <li>Third element</li>
>>>    </ul>
>>
>>> wouldn't the .not be applied to ul and therefore in this case the
>>> style shouldn't be applied? This isn't what I'm seeing.
>>
>>> thanks,
>>> K

[karlkras]

Oh carp. Now I see where he explicitly used it in the source...

    <ol id="orderedlist2">
        <li>First element, second list</li>
        <li>Second element, second list</li>
        <li>Third element, second list</li>
        <li>Li with child ul
            <ul>
                <li>Child One</li>
                <li>child two</li>
            </ul>
        </li>
    </ol>

and the '<li>Li with child ul' doesn't get the style. Not sure why I
didn't see that, but yes, it makes sense.





On Nov 6, 1:07 pm, Karl Swedberg <k...@...> wrote:

> An <li> could contain a <ul> in a nested list:
>
> <ul>
>         <li>item 1</li>
>         <li>item 2
>                 <ul>
>                         <li>sub-item 2.1</li>
>                         <li>sub-item 2.2</li>
>                 </ul>
>         </li>
>         <li>item 3</li>
> <ul>
>
> So, this line:
>    $("li").not(":has(ul)").css("border", "1px solid black");
>
> ...would select the first and third top-level <li>, but not the  
> second. It would also select the two "sub items."  The second top-
> level "li" has a "ul."
>
> --Karl
>
> _________________
> Karl Swedberg
>
> On Nov 6, 2009, at 3:42 PM, karlkras wrote:
>
> > Hi Michael,
>
> > Hmm, okay. I guess, but I'm not getting what the intent of the example
> > is. My explanation of what it should do is my best guess since I
> > didn't publish it, I'm simply an ignorant bystander.
>
> > In your interpretation, what would "don't contain any ul" mean?
> > Contained how? Under what syntax would an li contain a ul ?
>
> > I also attempted changing the .not clause as you recommended to
> > suppress li formatting that had <ul> ancestors and that didn't seem to
> > have an effect either. Of course my interpretation of what is and is
> > not working could be completely off base since I'm not sure what the
> > author (Jörn Zaefferer) had in mind here, and here is where he
> > suggested questions in concern should be posted.
>
> > thanks for the assistance,
> > K2
>
> > On Nov 5, 11:19 pm, Michel Belleville <michel.bellevi...@...>
> > wrote:
> >> It's not saying what you want, instead it's saying :
>
> >>    - $("li") get all li
> >>    - .not(":has(ul)") keep only those that don't contain any ul
>
> >> You might prefer something on the lines of :
> >> $("li").not("ul li")
>
> >> Which says :
>
> >>    - $("li") get all li
> >>    - .not("ul li") don't keep those that have ul for ancestor
>
> >> Michel Belleville
>
> >> 2009/11/6 karlkras <karlk...@...>
>
> >>> Hey,
> >>> So I'm using the starterkit to go through the basics with jQuery and
> >>> had a question on the expected behavior of this function:
> >>>  $(document).ready(function() {
> >>>   $("li").not(":has(ul)").css("border", "1px solid black");
> >>>  });
>
> >>> Isn't this saying:
> >>> Select all <li> elements, if the li element is not contained in an
> >>> <ul> then apply the style.
> >>> If so, then this doesn't appear to be working properly in the
> >>> starterkit.html
> >>> e.g., if I add this to the page:
>
> >>>    <ul id="bulletlist">
> >>>        <li>First element</li>
> >>>        <li>Second element</li>
> >>>        <li>Third element</li>
> >>>    </ul>
>
> >>> wouldn't the .not be applied to ul and therefore in this case the
> >>> style shouldn't be applied? This isn't what I'm seeing.
>
> >>> thanks,
> >>> K

[karlkras]

Okay, so this is the last I'm going to add to this thread... jQuery is
pretty cool.