JQuery :: Using Selectors With Click And Find Another Element Inside?
Jul 1, 2011
I'm trying to create a list of recipes which will on document ready all be hidden except the first one. And then when I click one of the dynamically added links (in a ul) in the sidebar I want the corresponding recipe to go from hidden to shown. I've managed to do everything really simply except I have no idea how to find the corresponding recipe when I click a link in the sidebar (the links link to the recipes with #recipe<number>)
Somehow I need to access the id of the specific recipe, which I suppose should be possible since the clickfunction should store that somehow?
EDIT: I just realized that I could just use the href value as my id for the recipe (since its the same e.g. #recipe). However I'm having trouble using the variable that stores the href/id in the .show function.
$("a[href*='#recipe']").click(function() {
$(".post").hide(600);
var theHref = $(this).attr("href");[code]....
My DOM structure in HTML page have some elements 'IMG'. One of 'img' element have attribute 'src' = 'lolo1.jpg'. How can i find the 'DIV' element with this specific 'img' element inside? I have to find nearest 'DIV'.
[Code]...
I wanna write function like a GetNearestDivID('lolo2.jpg') which would give me result 'mix2'
I have a complex JS object. It manipulates the page DOM. Inside it I have many repetitive selections spread across functions. I would like to cache the selectors to enhance performance. How do other people do this? I can cache on the function level but not the object. When I try to cache on the object level I seemingly end up with stale selectors that while defined don't actually work.
My gut is that I can only cache on the function level?
what I have read does not deal with caching inside a JS object.
i am working on a custom drop down list that has hidden #options DIV which is shown when the user clicks on a button. the problem i am having is that the click event does not seem to be attached to the LI elements since they are hidden when the page first loads. if i show the #options DIV when the page loads everything is working as expected.i've tried to attach the click event after i show the hidden UL but that didn't work either.what can i do to make sure the LI click event fires? i tried to put A tag inside of LI and attach click to that but to no avail.
I'm trying to do is simple "select all" checkbox script. The problem is, no matter what I seem to do, only first element is matched. $("input:checkbox").attr("checked", true); checks the first box only. Same with: $("input:checkbox").each(... I even tried copying this script directly from the jQuery documentation page: $("div").css("border","9px solid red"); It applies a red border to the first div on my page.. the example in the documentation applies it to all divs.
i have a menu generated by a list with nested lists. i want the parent link to stay highlighted when the mouse hovers over the sub menus. because those sub menus are also generated by jquery (qtip), CSS alone won't do it (triedul.topnav li:hover a {background-color: #F00;}).is there a way to do this using jquery?
I am using jQuery 1.4 and can't afford upgrading just yet. I've been trying to find out how to find out how to find if a div has an image inside it. How would I go about doing this?
jQuery.fn.checkBoxTableHighlighter = function(){ return this.each(function() { var $obj = $(this);[code]....
When the check box is checked (onload, click or keyup), if the table has a specified selector then i want to change the background color. I already have a working sample that i am converting to plugin. Since, my selector is at the table level, how can i find the checkboxes that are inside tr and td?
i have a requirement which i would like to solve with jQuery.I need to find all LI-elements which have a # as href url. The LI's are inside an div or ul with the ID=test.Then in the next step, when i loop through this items, i need to add a class=myclass to this elements. BUT it could be that there is no class tag at all, then it needs to be created or there is already a class, then i need to add myclass additonally.
It's basically just a table containing a message, who wrote it and when.I'm trying to build a function that filters what types of posts are visible in the newsfeed. So by clicking a button I want to be able to filter out the "message"-post or the "sale-alert"-post.Only way I can see which type of post it is, is by looking at the image source in the table. So depending on what that is, I want to set the table to display:none.
But I've been looking into the jquery selector a bit but I can't make it work. I've tried with .each(function and child selector...
I started working with JQuery. Mmy first function comes here: <script type="text/javascript"> $(document).ready(function(){ $("li").hide() $("li.um-gallery-1st").toggleClass( "big" ).show() $("li.um-gallery-1st").next().toggleClass( "small").show() $($this).next().toggleClass( "smaller").show() }); </script> How do I select the next element after next? In that case the third.
This used to work to grab the image and copy, (this) being the 'project' element:
text = $(this).find("copy").text(); photo = "imgs/work/" + $(this).find("image").text();
Now, since there can be multiple 'project' elements inside a company element I have a counter that tracks which index I should be on, but I don't know the syntax for getting project(2) image and copy within a company. I tried the following code using eq, but it's not working.
var currCompanyProj = 1; text = $((this).project.eq("+currCompanyProj+")).find("copy").text();
I'm getting all kinds of errors, no matter where I put the parenthesis: This all works without trying to find the attr. So, I am trying to slide a ul menu that has a parent anchor with an id of "A". $(("#VerColMenu > li > a").attr('id')=='A').find("+ ul").slideToggle("slow");
<html><head> <script src="jquery.js"></script> <script type="text/javascript"> addIframe = function() { $('body').append('<iframe>'); } appendIframe = function() { $('iframe').contents().find('body').append('appended');} </script> </head><body> <button onClick="javascript:addIframe();">addIframe</button> <button onClick="javascript:appendIframe();">appendIframe</button> </body></html> Now this work perfectly fine with jQ 1.6.2, but does not work with 1.4.2 because 1.4.2 does not yet know .find(element).
I have an input box with an id. I also have a jquery hotkey plugin which fires when I press F8 in this case. $(document).bind('keydown', 'f8', function (){ //do stuff here return false;}); The hotkey works just fine. (ive tested with alert boxes). What I am trying to do is find the cursor location (and then the elements id) when the f8 key is pressed. or... I want to find which input has focus on keydown.
I`m trying to make selecting an select list option (as it become when we click on it)by clicking on a special pseudo element.I`m trying to do it in this way:
