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
LVL 16
Gurpreet Singh RandhawaWeb DeveloperAsked:
Who is Participating?
 
Rainer JeschorConnect With a Mentor Commented:
Hi,
do you mean something like this?
http://jsfiddle.net/EE_RainerJ/SBR3v/

How do you initially hide the LIs?
If the HTML looks like this
<table>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 6</td>
    </tr>
</table>
<ul>
    <li class="hidden">Hidee Column 1 initially hidden</li>
    <li>Hidee Column 2 its near to it</li>
    <li class="hidden">Hidee Column 3 initially hidden</li>
    <li>Hidee Column 4 its near to it</li>
</ul>

Open in new window

the following script will hide column 2 and 4
$(document).ready(function () {
    $('li').each(function (idx) {
        if ($(this).is(":hidden")) {
         $('table tr td:nth-child(' + (idx+2) + ')').toggleClass("hidden");
        }
    });
});

Open in new window


HTH
Rainer
0
 
Rainer JeschorCommented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Julian HansenConnect With a Mentor Commented:
As a matter of interest why are you using the 4n / 5n for identifying the column?

You usually use this notation for hiding every nth item - is that what you want to do or do you want to hide a specific column?

Sounds like you want to take the index of the li add 1 to that and use that value in the nth child
Something like this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  // pick up the click on the li element
  $('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 + ')').toggle();
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>
   
<ul>
  <li>Hide Column 2</li>
  <li>Hide Column 3</li>
</ul>
</body>
</html>

Open in new window

0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Julian HansenCommented:
Sorry I don't understand your last two posts.
0
 
Rainer JeschorCommented:
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
0
 
Julian HansenCommented:
I would have thought changing toggle to toggleClass was obvious - therefore trying to establish if there was something else.
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Julian HansenCommented:
Please give an illustration of what you mean - I cannot understand what you are asking.
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Julian HansenCommented:
Why don't you just render the html out with the correct classes to hide the 1,3,6 and 7 elements?
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Julian HansenCommented:
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.
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i made it work
0
 
Julian HansenCommented:
Could you post your solution.

Also - any particular reason you assigned points as you did?
0
 
Julian HansenCommented:
@RainerJ - thanks mate.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.