Link to home
Start Free TrialLog in
Avatar of Coast Line
Coast LineFlag for Canada

asked on

using n:th child jquery having some doubts

I a using the following code to match the exact but somehow i am missing something :

$("div ul li:nth-child(4n-7)").toggleClass("hideit");      
$("table tr td:nth-child(5n-8)").toggleClass("madehidden");

the elements are like this

UL LI are in

  1 2 3 4 5 6 7 8

table links are like
1 2 3 4 5 6 7 8 9 10

two are more in case of tables, now i need to map

ui>li of 3 should reflect the corrosponding 4 of table and same as 6 should reflect with 7 and 8 should reflect with 9

how can i do this,

please guide
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
could you please provide a sample at jsFiddle or explain in a few words what you try to achieve?
I do not fully understand your question, therefore thanks for more explanation.

Thanks.
Rainer
Avatar of Coast Line

ASKER

Here is the fiddle

http://jsfiddle.net/XzadF/

I am trying to map the element to element

suppose

UL>li HAS

   1 2

TAbLE HAS

1 2 3 4

1 SHOULD EFFECT 2 AND 2 SHOULD EFFECT 3

because IN MY TABLE THERE ARE TWO EXTRA ELEMENTS AT THE START AND AT THE END, THAT WAY, I AM UNABLE TO USE THE NTH CHILD ELEMENT PROPERLY
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
pretty much near but now the things is on the click on the respective li which is connected with table having class of column 2 should be hidden, i can use toggleClass to toggle it
i need it to be loaded after document ready, few list items to be hidden and their corresponding columns should be hidden, not inside the div
Sorry I don't understand your last two posts.
Hi,
something like this?
http://jsfiddle.net/EE_RainerJ/XRSvG/

(Reusing JulianH code -> please split points if accurate)

$(document).ready(function () {
    $('li').click(function (e) {
        // Item index is 0 based - nth-child works from 1. 
        // You want the item in the table 1 over the li item - so you have to 
        // add 2, 1 for the 0 based and 1 to get to the next item
        var index = $(this).index() + 2;
        // Now use nth-child with the calculated index value
        $('table tr td:nth-child(' + index + ')').toggleClass("hidden");
    });
});

Open in new window


HTH
Rainer
I would have thought changing toggle to toggleClass was obvious - therefore trying to establish if there was something else.
Guys, we are very near, but need to put the code outside the li after document.ready, like when i should load my page, on the basis of selected nth elements of ul > li, the respected linked TD elements should be hidden
Please give an illustration of what you mean - I cannot understand what you are asking.
consider a table and consider a seperate div which has a ul li inside it from table

initially when i load the webpage

initially i hide the li which is 1st, 3rd and 7th

when i hide the li, the table columns are associated with it too.

so i want to hide that too like 1st, 3rd and 7th

I hope i made my point clear
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
check this url

if you click the + button on the right side, u will see the popup coming down, it is all selected, i want to hide the 1,3,6,7

if you click you will table column is getting hidden

so relevant to the 1,3,6,7. i want to hide its associated table columns also, initially on document load

http://tinyurl.com/o2nuwqb

Try here, do not put whole code in jsfiddle, my request

show only the code which needs improvement
Why don't you just render the html out with the correct classes to hide the 1,3,6 and 7 elements?
did u see the link i posted in my last link, what is render html

the code is already, u can check and see what i am trying to do
Yes I saw the link - and I am still not understanding what is missing.

If you want to hide columns 1,3,6,7 on page load then render them out with display: none or with a class that hides them.

Taking your last post
if you click the + button on the right side, u will see the popup coming down, it is all selected, i want to hide the 1,3,6,7
Do you want the <li> item checkboxes to be hidden and the corresponding table columns?
Again - my question is when you render the page can't you render them out hidden with the right classes?
so relevant to the 1,3,6,7. i want to hide its associated table columns also, initially on document load
This is ambiguous - on the one had it sounds like you are saying you want to hide the table columns that match the selected <li> items - which it does already. But you also appear to be saying that you want to specifically hide those on page load - which is why I say render them out hidden. If that does not work then just put code in to hide those columns
$(function() {
    $('table tr td:nth-child(1)').addClass('hidden');
    $('table tr td:nth-child(3)').addClass('hidden');
    $('table tr td:nth-child(6)').addClass('hidden');
    $('table tr td:nth-child(7)').addClass('hidden');
    // Change classes accordingly
    $('ul li:nth-child(1)').addClass('hidden');
    $('ul li:nth-child(3)').addClass('hidden');
    $('ul li:nth-child(6)').addClass('hidden');
    $('ul li:nth-child(7)').addClass('hidden');
    ...
});

Open in new window

But personally I don't like doing this - render your page the way you want the default and use Javascript / JQuery to modify it client side.
hi, You gave a lot of code, that's why i want to use 4n-7 type it should detect automatically with single line to which to hide, same with tables
i made it work
Could you post your solution.

Also - any particular reason you assigned points as you did?
@RainerJ - thanks mate.