Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts

    Jquery nth term append

    Hey,

    Not sure if this is the right section, but I am currently running a wordpress loop for the search page. It displays the results in two different templates.

    One of the templates I want to apply a clear both to the second one.

    Link: http://admiretheweb.com/?s=the

    The loop works like so.

    Get posts, if in cat xx show in template a else show the rest in template b.

    Templates b needs a clear on the second div, I did this by the following:

    Code:
    $(document).ready(function() {
    $("#article-inspir:nth-child(2n)").append("<div style='clear:both;'></div>");
    });
    I've tried wrapping the div different quote styles, but it's not selecting the nth-child and applying the clear.

    E.g:

    Code:
    $(document).ready(function() {
    $("#article-inspir:nth-child(2n)").append("<div style="clear:both;"></div>");
    });
    Code:
    $(document).ready(function() {
    $("#article-inspir:nth-child(2n)").append('<div style="clear:both;"></div>');
    });
    Why ?
    Last edited by CHEWX; 11-14-2012 at 08:48 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I think you fell for a common misunderstanding about the nth-child selector

    #yourid:nth-child(2n) does NOT mean "select the nth child of the element with id=yourid"

    It means: Select all elements with id=yourid (there can be only one!) and then filter those elements so that only those elements remain that are themselves the correct nth-child of their parents.

    On top of that: Every id attribute on the same page can appear only once! You chose to use the same id="article-inspir" for several <article> elements which is illegal. So you should go for class="article-inspir" instead and change the selector to ".article-inspir"

  • Users who have thanked devnull69 for this post:

    CHEWX (11-14-2012)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Ok, regardless of the illegal ID use. This wouldn't work then ?

    As I would be using #main :nth-child(2n) which would then select every second template within, which I don't want. I want it to select every second of a certain class (or in my case ID).

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by CHEWX View Post
    Ok, regardless of the illegal ID use. This wouldn't work then ?

    As I would be using #main :nth-child(2n) which would then select every second template within, which I don't want. I want it to select every second of a certain class (or in my case ID).
    Code:
    #article-inspir:nth-child(2n)
    hits both
    Code:
    <article id=​"article-inspir" class=​"drop-shadow curved curved-hz-1">

    i will say however, that you shouldn't actually need to use scripts for this.
    simply use CSS to add clear:both to the same selector, or use :after content if you really need to inject a styled block.



    in general with these sort of problems, just try out different permutations in the firebug or dev tools console until you hit the tags you want.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Quote Originally Posted by CHEWX View Post
    I want it to select every second of a certain class (or in my case ID).
    YES, you can do it for "class"

    NO, it won't work for "id"

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by devnull69 View Post
    YES, you can do it for "class"

    NO, it won't work for "id"
    Really, so if I was to change the ID to a class and add this code

    Code:
    $(document).ready(function() {
    $(".article-inspir:nth-child(2n)").append("<div style='clear:both;'></div>");
    });
    It would would ? Doesn't that rubbish what was said above ?

    Quote Originally Posted by rnd me View Post
    Code:
    #article-inspir:nth-child(2n)
    hits both
    Code:
    <article id=​"article-inspir" class=​"drop-shadow curved curved-hz-1">

    i will say however, that you shouldn't actually need to use scripts for this.
    simply use CSS to add clear:both to the same selector, or use :after content if you really need to inject a styled block.



    in general with these sort of problems, just try out different permutations in the firebug or dev tools console until you hit the tags you want.
    There is nothing in CSS that will work with this. Only nth term which isn't backwards compatible so that is why I'm using Jquery.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Doesn't that rubbish what was said above ?
    Indeed ... sorry

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    It doesn't work.

    I've change to class's and it's not selecting. It's the only way to fix the problem. I've manually inputted the clear after every second and it fixes the problem, but I need to use javascript to append and no worky.

    What's the problem ?

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    It works perfectly in this example, so the problem must be somewhere else

    Wait wait wait ... you said "manually inputted the clear after every second" ... that's not what your code is doing

    .append() will append a new CHILD (sub node) and not a new SIBLING (node after the current node). Try .after() instead

    Code:
    $(document).ready(function() {
       $(".article-inspir:nth-child(2n)").after("<div style='clear:both;'></div>");
    });
    Last edited by devnull69; 11-14-2012 at 08:36 PM.

  • Users who have thanked devnull69 for this post:

    CHEWX (11-14-2012)

  • #10
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Oh, thanks for that. Yeah it does work.

    As you can see it's adding the XXX to the correct class.

    But the clear doesn't.

    I usually add the clear AFTER the div in the code, rather that TO the div. What would I need to do to get the jquery to add the code AFTER the div, rather than TO the div. If that makes sense.

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    see latest edit above

  • #12
    Regular Coder
    Join Date
    Dec 2010
    Posts
    139
    Thanks
    17
    Thanked 6 Times in 6 Posts
    AHHH ! I SEE.

    Thanks so much, legend.

    Works perfectly.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •