Please look at the following HTML snippet:
<body>
some text
<p>more text</p>
even more text
</body>
The value of document.body.children.length would be 1. The one child
is the <ptag. Now what I want is to be able to get the children of
body including the text elements.
So essentially there would be 3 children of body: 'some text', <p>,
'even more text'. How can I do this?
i want to get the ids of all the children of id 'top' and store it in an array in the order listed above. so final output in this case would be:
arr[0] = 1
arr[1] = 2
arr[2] = 3
is there a function or simple procedure that help me do this?
I'm trying to get an unordered list and its children as an HTML string on a mouseout event, but html()only selects the child elements:var theHtml = $('ul', this).html();I've tried using andSelf(), but that doesn't return the result I want:var theHtml =$('ul',this).and Self(). html();I can't choose $(this).html() as I need only the list.
View 2 Replies View RelatedIm trying to use javascript to count only the direct li children of ul.So I tried childnode but im not really familiar with it.Basically the li items inside the li should not be counted.
View 6 Replies View RelatedI have a UL that loads in dynamically after the DOM has already finished loading via and external API that doesn't have a callback function for when it's finished. However, I need to manipulate the children of the UL once it's loaded in, so I need some type of listener for when the UL changes.I need an event to fire when an element or it's children change.Is there anything like this in jQuery? Otherwise I'm going to have to create a setInterval to polloccasionallyto see if the UL has loaded, and that sounds sloppy.
View 3 Replies View RelatedHow can I find if each of the <p> tags contains <img> tag, then style the <p> tags which contain <img> inside them?
I have pre-set all <p> will have this style,code...
I am manipulating a style on elements with class="House" or "Senate." Unfortunately, it sets the style for every child underneath. [code]...
View 7 Replies View RelatedWith a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all [url], current selecting code is [url]
<div class="demo" id="demo_1">
I'm having some difficulties with a menu I'm making. I build up the
menu through DOM. I append childnodes to a tree. 2 types of children
are possible: url (a hyperlink) and sub (a submap).
The tree is thus of a structure
main
|-url1
|-url2
|-submap
|--url21
|--url22
To open up the submaps I set the onclick event to a function I
created:
itemnode.onclick=function() { openMap(itemnode) }
The problem now is that 1 click in a submap results in several times
the openmap function. A click on the url21 node is in fact a click on
a child of submap so the function in the onclick event of this submap
is called. But it is also a click on a child of main, so this onclick
function is also called.
How can you limit that the onclick event handler is only called on the
1 node (ic. submap) where you actually clicked on submap instead of
its urls?
Full code listing below....
The code below works fine in Firefox but doesn't work in IE8. Is that to be expected and if so, why?
if (($(this).children(a).text()) == 'Hide')
If I change it to -- if ($('.accordionShow .head a').text() == 'Hide') it works fine but I lose the ability to use 'this', which I would like to have.
The HTML is:
What I want to do is be able to identify the label as Hide or Show without getting the whole text, i.e. 'Hide the Section'. That way no matter what the label is it will work the same. And I could substring it I suppose by using the text of the <h2> tag but it seems that is unnecessary also.
Is this just another peculiarity of IE, that it doesn't use the .children(a) selector?
I need a script to get a div, it's children, it's children's children, and any other children that might lie within any children.
basically a div and all it contains within, no matter how deep they go.
I have this code running:
[Code]...
The problem I'm having is that id GlobalList has CSS childs and when I click within the DIV if its not GlobalList then it closes out. I'm trying to see how I can modify it, so it won't close if I click within the DIV structure
[Code]...
I'm playing around with some AJAX-ish stuff and
encountered some problem in the JS side of the universe. Maybe someone
here can suggest an alternative that works.
I have developed a simple ASP.NET application with a web page that
should display a list of users. This list page is designed to start
with an empty table (with columns defined), and, onload, send an
XmlHttp request to a server component (a.k.a. ListServer). This
ListServer is currently simulating a long-running operation. So, it
sleeps for 3 seconds, and then grabs a list of 4 users from an xml
file. It applies an xsl transformation and returns the result.
The xslt is designed to take the xml data and convert it to a
<ListChunkroot element containing a <trfor each user in the XML
data. Each row contains 4 columns (Id, Login, Password, Name). The
javascript in the list page grabs the responseXML from the XmlHttp
object and should, for each <trin it, create a copy of the row
coming from the server and adding it to the list on the client.
I actually got all that to work quite fine. The js snipplet dealing
with copying the row coming from the server and adding it to the table
on the client is: Code:
I have a div containing many children all very different, each one as a different width. I need to get the width of all the children. I mean child1.width() + child2.width() + child3.width() etc... Of course as a new child can be added anytime I can not use the kind of things I put above.
I tried that among other things :
$("div.mydiv").children().width();
But I only get the width ofthe first child.
I was wondering if its possible in javascript to do something like this:
This is my code with int value I can target children is this also possible with a string like img?
Is there any way of removing more than one or a a group of children, for example:
Last 5 children
Children 2-5
Child 2 and 5
Having trouble with nodes: this time, childen[].
With this html:
HTML Code:
And multiple other divs with similar structure, id="2", "3" etc, I want to access the <p> tags to change style-- so that, for example, the last paragraph in all of the divs would change.
To access the last paragraph, I've tried:
Code:
--which generates an error message that the function itself is undefined.
There's till something I'm not understanding about using node-seekers with classes of tags. But if I can get it right, it saves giving each of the <p> tags a class, which would be easier, but code-heavy.
Think how twitter appends a chunk of list items to the end of the list when you load more results. I'm trying to achieve the same thing without replacing the entire parent with the same content each time 'appendRows1()'
The function needs to support any type of content - the children could be tr's li's etc.[code]...
I'm loading an xml data file and then trying to take a particular node
and add it, as html, to an element on my page using inner HTML. The
xml is like what is below, with the . Code:
I have about 13 ul li a items in a list and some have nested lists within them e.g. ul li ul li a and some don't. I want to prevent the default action on only a elements that have nested lists within them but not prevent default action for ones that don't. Here's an example of the markup.
[Code]...
However, instead, is there a way to tell jQuery to only apply this preventDefault to ul li a elements that have ul li a descendants/children (not sure of correct terminology here) so I can have the list items in any order?
just wondering if there is any way for the :contains to not look in children to find something? Tried $(':contains("$")');, but it returns everything. Was thinking of something like $(":not(':parent')").filter(':contains("$")');, but the console returns null (and even then it would exclude elements that have children and their text includes "$".)
Trying to make a script that looks through a page and finds the price on any page. The only way I could think of doing this relatively accurately is to search for all elements with "$" in the text, then get the one that has the largest height/width (That's problem #2, I think -- will deal with it once i get there :)
I have:
<dt><a href="javascript:void(0);">Menu 1</a>
<dd>
<....>
[code]....
Given the following markup
<div id="menu">
<ul>
<li><a id="home" href="#">Home</a></li>
<li>
<a id="about" href="#">About</a>
<div>
About sub menu
</div></li><li>
<a id="products" href="#">Products</a>
<div><h2>Books</h2>
<ul><li>ColdFusion</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
<li>Groovy</li>
<li>Hibernate</li> .....
How can I grab only the 1st level children of my node? I want direct decendents of menu only. My code below is grabbing all <li> which is going to be a problem.
(function($){
$.fn.extend({
myplugin: function(options){
return this.each(function(){
// the object we are working with
var obj = $(this);
// get a list of menu items
var menuItems = $('li',obj);
});
}});
})(jQuery);
Taking the following markup
<div id="menu">
<ul>
<li><a id="home" href="#">Home</a></li>
<li>
<a id="about" href="#">About</a>
<div>
About sub menu
</div>
</li>
<li>
<a id="products" href="#">Products</a>
<div>
<h2>Books</h2> .....
How can I grab the immediate li children only and not all of the li that fall in this object. The following gives me every single <li> which is not what I am looking for.
(function($){
$.fn.extend({
myplugin: function(options){
return this.each(function(){
// the object we are working with
var obj = $(this);
// get a list of menu items
var menuItems = $('li',obj);
});
}});
})(jQuery);
I have a dropdown (id='job-roles'), and I would like to remove a class from all of the options in the dropdown when certain conditions are met, but I cannot figure out how to do it.
View 1 Replies View RelatedI am trying to create a type of pop-up menu on a page. When you click anywhere away from the pop-up div I want the menu to close.
I do it somehting like this:
Code HTML4Strict:
<div id="menu-123456" onmouseout="closemenu('123456');">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
When I click away from the div, the close menu function works fine. The problem is that the onmouseout() function is triggered when I click on anything within the <ul>. Since this is inside the original div, this is not what I want to happen.