Resolved Jquery nth term append

[CHEWX]

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:

$(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:

$(document).ready(function() {
$("#article-inspir:nth-child(2n)").append("<div style="clear:both;"></div>");
});

$(document).ready(function() {
$("#article-inspir:nth-child(2n)").append('<div style="clear:both;"></div>');
});

Why ?

[devnull69]

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"

[CHEWX]

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).

[rnd me]

Originally Posted by CHEWX

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).

#article-inspir:nth-child(2n)

hits both

<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.

[devnull69]

Originally Posted by CHEWX

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"

[CHEWX]

Originally Posted by devnull69

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

$(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 ?

Originally Posted by rnd me

#article-inspir:nth-child(2n)

hits both

<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.

[devnull69]

Doesn't that rubbish what was said above ?

Indeed ... sorry

[CHEWX]

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 ?

[devnull69]

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

$(document).ready(function() {
   $(".article-inspir:nth-child(2n)").after("<div style='clear:both;'></div>");
});

[CHEWX]

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.

[devnull69]

see latest edit above

[CHEWX]

AHHH ! I SEE.

Thanks so much, legend.

Works perfectly.