JQuery :: Selecting Immediate Children Only In Object
Feb 12, 2010
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);
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);
So I'm new to jquery and I'm trying to spice up a navigation menu in my cms. I'm having trouble selecting children in a nested UL. Its just an add class on hover. But as you can see, it's selecting all of the children on hover. [URL]. I'm trying to find a solution that allows each listed link to be highlighted on hover, regardless of its place.
I have the following scenario(well the structure is the same): <fieldset id="fs"><p><select id="sl" runat="server" /></p></fieldset> The name of the fieldset is constant but the name of the select is generated via asp.net thus i do not know the final id on that element. I can call on the select by using $("[id$='sl']").change() which works. But its a bad solution because I need to be sure that I only trigger the element under the fieldset "fs". $("#fs").children().change() Works as well but i obviously I am looking for a way to target only that select element under only that fieldset.
I am trying to assign a variable to a jquery object that is found using the children() and eq() methods. This is a simplified version of the html structure.[code]Here is the jquery code. All I want to do is assign an object to the variable and be able to manipulate the object through the variable. [code]Again this is a simplified version of my code but the structure is similar.
integrating PHP-HTML-JS I'd need some help for doing the following:I have a index.php including:
<script type="text/javascript"> function filter (phrase, _id){ var words = phrase.value.toLowerCase().split(" ");
[code]....
and a child.php including a table object with the id LIST.I'd need to change the parent.php in order to filter on real-time the table LIST via the FILT input on the parent form. I have tried different values instead of 'this' on the js function calling but nothing succesfully.
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 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'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.
It basically works, but only if I remove the code part where I first hide the children of the sidenav, but doesn't work when I want at default all children of the sidenav to be hidden and showed only if clicked a particular parent menu. 1. How can this be accomplished? 2. Also how can I hide the children of previous clicked parents when I click on another parent to chow it's children?
I have the following html and I'm trying to figure out how to delete the last rows the are children of div feed. I only want to leave a max of the first x rows. First I count them using $numdivs = $("#feed > div").size() - 1;. Then, I'm a bit lost on what to do next and have looked at the docs for children and thought of trying to traverse but can't seem to get it to work.
<body> <div id="search"> </div> <div id="feed"> <h2>Feed</h2> <div id="firstrow" class="row"/> <div id="1741946459" class="row">Test data for the first row</div> <div id="1741946327" class="row">Test data for the second row</div> <div id="1741939928" class="row">Test data for the blah row</div> <div id="1741939928" class="row">Test data for the blah2 row</div> <div id="1741939928" class="row">Test data for the blah3 row</div> </div> </body>
When calling remove on a selector, I understand that events & data are removed from the matched elements. What about children of these nodes, is the same true?
I'm building a volunteer translation site. In order to constantly update only paragraphs that multiple translators are working on, I need to pass an array to PHP of A: which paragraphs are open, and B: which translations have been submitted and are visible on the user's screen. PHP will then compare this with what is in the database and tell jQuery to add new submitted translation paragraphs or remove deleted ones.I've managed to make a string of all the open Div's and have it updated every second, like this:
function cycle(){ var data = ''; $('.paragraphtobetranslated:visible').each(function(){
I need to select the last children of parent elements
For example
<ul> <li></li> <-This will have the background #1a <li></li> <-This will have the background #1a <li><ul>
[Code]....
So I would need the last children. If there is no nested element then that is considered the last child. I have to write a jquery script to apply a background to the last children. A nested element can have a nested element and then that element's children will be considered the last ones so they will get the background but not the parents of those children. If the item has no children then that item will have a background.
So there are 3 different backgrounds. Each letter a, b c will represent a lighter tone compared to the previous color. C is lighter than B, B is lighter than A etc. So this will have to be a "smart" system in which the ul li will be updated and depending if it is the last one inhierarchyit will not have the arrow.
I have a set of nested ULs that is generated for me. I want to use it to create a drop-down navigation menu, however I don't want to use the values in the second level of ULs in the navigation. It looks something like this:
<ul class="topMenu"> <li>home</li> <li>community
[code]....
Level one is visible as sort of tabs, and then mousing over should reveal a list of the next level of links.I would like to use the above list and mouse over "community" and see a list of links
award type 1 award type 2 discussion 1
[code]....
Or another option would be to combine levels 2 and 3 so I would see
awards award type 1 award type 2 discussions discussion1
and then mousing over discussion 1 would reveal the more info link.
I got this here: [URL]. When you hover over the Buy Rhoadanide or Research the sub menu comes up. The only way I could get it to work was to make the OTHER menu hide if one is hovered over, but I cant hide them anymore Is there a way to do this: 1. Hover Link 2. Show Div with more links below it 3. Keep the Divs visible if the Hover Link or the Div is hovered 4. Hide the Divs when both are not selected.
I 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.
I have a button and a table that I want to clone when "Add new" button is pressed, and then append the cloned elements to the "items" container, but with updated id's and names - the update is done by appending the value of "num" attribute of "items". In the end I'll have to clone and update the id's and names for multiple input elements in the table found in the "default_container" - but right now it doesn't work even for direct children. The problem (one of them at least) right now is that the iteration over the children isn't performed.
I'm trying to manipulate items in a table using jQuery, using the parent() and children() methods of the "this" object. I think I'm not understanding how to use the parent and children methods correctly.
What I want the code to do is to show the list and button within the <td></td> when clicked on, and then hide it when the newly shown button appears.
