Solved

using n:th child jquery having some doubts

Posted on 2013-12-17
21
466 Views
Last Modified: 2013-12-19
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
0
Comment
  • 9
  • 8
  • 3
21 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39726269
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
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39726287
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 39726404
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
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39726454
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
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39726486
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39726573
Sorry I don't understand your last two posts.
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39726831
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39726937
I would have thought changing toggle to toggleClass was obvious - therefore trying to establish if there was something else.
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39726981
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39727219
Please give an illustration of what you mean - I cannot understand what you are asking.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39727252
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
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 250 total points
ID: 39727396
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
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39727450
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39728527
Why don't you just render the html out with the correct classes to hide the 1,3,6 and 7 elements?
0
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39728570
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39728695
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
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39728711
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
 
LVL 15

Author Comment

by:Gurpreet Singh Randhawa
ID: 39729001
i made it work
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39729210
Could you post your solution.

Also - any particular reason you assigned points as you did?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39729214
@RainerJ - thanks mate.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now