Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

using n:th child jquery having some doubts

Posted on 2013-12-17
21
Medium Priority
?
484 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 16

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 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 16

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 16

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 59

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 59

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 16

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 59

Expert Comment

by:Julian Hansen
ID: 39727219
Please give an illustration of what you mean - I cannot understand what you are asking.
0
 
LVL 16

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 1000 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 16

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 59

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 16

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 59

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 16

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 16

Author Comment

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

Expert Comment

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

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

Expert Comment

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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

618 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