Solved

JQuery, Select an elements parent element

Posted on 2008-10-07
4
6,379 Views
Last Modified: 2012-08-13
I have the code below which in JQuery starts with a ul that has a specific ID

then gets each child li of that ul. I will be doing more here on the li element... later

then it gets each child up of each specific li element.. again, I will be doing operation on each li

but now I have a specific li element and I need to get the following information

1) The width of its parent li element
2) The height of its parent li element

Where it says alert(this); is where I have each ul element.
$('ul#RightSliderMenu').each(function(){
    $(this).children('li').each(function(){
      // perform operation on li element
      $(this).children('ul').each(function(){
        // perform operation on ul element
        alert(this);
      });
    });
  });

Open in new window

0
Comment
Question by:Hube02
[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
  • 2
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22663004
$(this).parent() should give you the parent element of whatever "this" refers to at that point.
0
 
LVL 18

Author Comment

by:Hube02
ID: 22663090
Thanks Hielo, I'm learning it one step at a time... It does not help that I want to do something that is not covered in the books I have. They have a lot of stuff in there about applying classes to elements with JQuery, but not about setting css style using it.

this is what I have to obtain the information I wanted...
  $('ul#RightSliderMenu').each(function(){
    $(this).children('li').each(function(){      // the "this" in this line is the element ul#RightSliderMent
      $(this).children('ul').each(function(){    // the "this" in this line is the element ul#RigntSliderMenu>li
        alert(this);                            // the "this" in this line is the element ul#RightSliderment>li>ul
        alert($(this).parent().css('width'));
      });
    });
  });

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22663173
>>but not about setting css style using it.
To set some properties:
$(this).css( { backgroundColor:"yellow", fontWeight:"bolder" } );

to find out a property:
$(this).css( "background-color");

You don't have to use "this", if you know the element id:
$("#theId").css(....);

However, I believe the css() will report the css as applied via style="...". Forget jQuery for a second and look at the attached code. Try it. Then remove the style attribute, try it again. See the difference. Hope that makes sense.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script>
window.onload=init;
function init(){
alert(document.getElementById("theDiv").style.width);
}
</script>
</head>
<body>
<div id="theDiv" style="width:50%;">Hello</div>
</body>
</html>

Open in new window

0
 
LVL 18

Author Comment

by:Hube02
ID: 22667869
The problem is that past the id of the main list, I have nothing to go with. there will be no classes or id's on these li and ul elements. In the end the process is going to great an animation that will slide navigation menus out of the right side of the screen, but to keep it accessible, I will be using JQuery(JavaScript) to apply all the initial styles as well as to created the click/mouseover animations. This way if someone visits the site with JS turned off, the will still be able to see the navigation, where if I set the styles in a style sheet and had hidden elements, they would never be able to get to these elements because they are controlled with JS.

Another reason is that we (as in the people I work for) have decided to go with JQuery as a standard package. Rather than using several different things on different sites, we are going to use a standard set of tools, JQuery just happens to be one of those tools in the list.

I still appreciate the input.
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
bootstrap form validations! 1 41
Where is this content coming from? 4 40
Add Rows on a Table 8 55
change script to get csv file on the prompt 8 33
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

752 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