Target specific value of a node with jQuery

Question

OK, I basically have the following scenario with some dynamically generated html:

<div id = "main-hold">
    <ul class="main-class">
        <li class="item">
        <a tabindex="-50" title="Title 1" class="class aa" id="12365" href="#" target="">Learning outcomes<div class="end-icon"></div></a>

...

Basically I want to be able to show/hide objects of class "item" using the unique id referenced within, but am struggling to target it. Any thoughts appreciated

$("#main-hold").hide();

Successfully hides everything, but I haven't been able to drill down to the id level.

Is it the `li` elements you want to hide or `a` elements in them? If `li`s do they all have the class `item`? — PeterKA, Mar 23 '15 at 15:06
Hi, Yes, they are all of class item, so I thought the unique id would be the best option to target individuals. To hide the a elements in them would be sufficient. — BungalowHead, Mar 23 '15 at 15:13
What unique ID are you referring to? In response to **WHAT** event would you like to hide/show individual `li.item` elements? You may probably have to give us more code than you have given us ... Give us some context. — PeterKA, Mar 23 '15 at 15:16
Sorry, so from the snippet above, if you can imagining it continuing on like

score 1 · Answer 1 · answered Mar 23 '15 at 14:46

These are your possibilities:

Hide all elements of class item

$(".item").hide();

Hide all elements of class item that are a child of #main-hold:

$("#main-hold .item").hide();

Hide all elements of class item that are a DIRECT child of #main-hold (this isn't the case for you, but wanted to add for clarity):

$("#main-hold > .item").hide();

Hide all elements of class item that are of type li and are a child of #main-hold:

$("#main-hold li.item").hide();

score 0 · Answer 2 · answered Mar 23 '15 at 14:50

0

as i understood, you somehow know the unique id of items, you want to hide... if your html is always like that - and the id is a child element of item, you would do it like that:

$("#theDesiredID").parent().hide();

answered Mar 23 '15 at 14:50

errand

980
1
7
18

score 0 · Accepted Answer · answered Mar 23 '15 at 14:51

0

Here, try this one, hope this help :

$(document).ready(function() {
   $('.item #12365').hide();

   $('#main-hold').on('click','.item', function(){
      $('.item #12365').toggle();
   });
});

answered Mar 23 '15 at 14:51

Norlihazmey Ghazali

9,000
1
23
40

Target specific value of a node with jQuery

3 Answers3