Coast Line
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)").toggl eClass("hi deit");
$("table tr td:nth-child(5n-8)").toggl eClass("ma dehidden") ;
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
$("div ul li:nth-child(4n-7)").toggl
$("table tr td:nth-child(5n-8)").toggl
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
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
ASKER
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)
HTH
Rainer
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");
});
});
HTH
Rainer
I would have thought changing toggle to toggleClass was obvious - therefore trying to establish if there was something else.
ASKER
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.
ASKER
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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?
ASKER
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
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
Again - my question is when you render the page can't you render them out hidden with the right classes?
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,7Do 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 loadThis 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');
...
});
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.
ASKER
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
ASKER
i made it work
Could you post your solution.
Also - any particular reason you assigned points as you did?
Also - any particular reason you assigned points as you did?
@RainerJ - thanks mate.
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