Develop Reference

Reference child element in javascript

I am using the following piece of code in order to add a class to an li item.
JavaScript
$(document).on('click', '.sidenav .page_item_has_children', function({
$(this).addClass('side_open').siblings.removeClass('side_open')
})
As you can see It refers to the element that is clicked, in this instance an li. I need to apply this to the li's child element which is a ul so that the dropdown can appear. I assume I basically need something along the lines of the following however I can not work it out.
$(document).on('click', '.sidenav .page_item_has_children', function({
$(child).addClass('side_open').siblings.removeClass('side_open')
})
If anyone has any ideas on how this can be done that would be great!
Thanks - Scott

Using jQuery you could try jQuery(this).find('ul') or jQuery(this).children('ul');
See also: How to get the children of the $(this) selector?
Use $(this).find('ul'); to return all ul that are descendants of the li u referenced or $(this).children('ul') to find only 1st-level descendants.

How correct create dynamiclly select with horizontal orientation?

I want danamically create select element in horizontal block. And have funny result. What is the correct way?
JSFiddle

You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.
Demo here: http://jsfiddle.net/Palestinian/rKGtQ/
Code:
// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');
// apply styles on select menu
$("#sm").selectmenu();
// add options to controlgroup
$( "#test" ).controlgroup( "option", "corners", true );
// create controlgroup
$( "#test" ).controlgroup().trigger('create');
controlgroup div ID is #test.

I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.
Namely, the $("#sm") line doesn't know which select you are trying to target.
Maybe you should try something like this:
$("button").click(function () {
$("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
$("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});
Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.

Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle
$("button").click(function show_filters() {
//alert("Hello");
$("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
$(".sm:last").selectmenu();
})
Updated Fiddle

change the $("#sm").selectmenu(); to $("select").selectmenu();
With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.
Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/

Deleting <li> issue

I'm building a recipe saving application where I have a form that looks like this http://jsfiddle.net/LHPbh/.
As you can see, I have a set of form elements contained in an <li>. You can click Add Ingredient and have more li's added to the field.
My problem is:
The first li is the only one that deletes. If you click Add Ingredient, and then try and delete that one, nothing works?
Is there a way to not have the first li have a delete by it, but all subsequent li's have a delete link on the side? (Just because there should always be at least one ingredient?)

When you call clone(), it isn't duplicating the events. You need to call clone(true) in order for it to do this, as explained in the documentation.

You did not put an event listener on the cloned elements. Also, you should not give the "delete"-link its own id, as those need to be unique.
To make the first ingredient have no delete button, just don't include one in your markup but only dynamically create and append them to the cloned elements:
var deleteButton = $("<a class='float-left'>Delete</a>").click(deleteThis);
$('ul#listadd > li:first')
.clone()
.attr('name', 'ingredient' + newNum)
.append(deleteButton)
.appendTo('ul#listadd');
function deleteThis() {
var li = $(this).closest('li')
li.fadeOut('slow', function() { li.remove(); });
}
Demo at jsfiddle.net

http://jsfiddle.net/LHPbh/2/
$('.deleteThis').live("click", function () {
var li = $(this).closest('li')
li.fadeOut('slow', function() { li.remove(); });
});
It is answer to the 1. point. The problem was, that the eventhandler binding did not happen in newly created elements, because this code runs only on the load of the page. This can be solved by using .live(). And an other problem was, that id-s must be unique. So instead id, here you can use class .deleteThis.
http://jsfiddle.net/LHPbh/19/
This has added answer to the 2. point:
if ($("#listadd li").length == 1) {
return;
}
If the list only contains 1 li element the rest of the callback will not run.

You are adding items that are added to the DOM dynamically, thus jQuery can't access them :)
In this case you can use the following code:
$(document).on('click', '.selector', function(e) {
//code here
});
Secondly, you were loading a quite old version of jQuery.
Thirdly, you were trying to select an element with an ID that already existed, and ID's can only exist one time. I've changed it to a class in the updated example.
Lastly, you were defining the class of the link twice like this:
<a class='float-left' id="deletethis" href='#' class="deletethis">Delete</a>
That also gave a problem, so I changed it to correct markup like this:
<a class='float-left deletethis' href='#'>Delete</a>
Good luck :) I've updated your jsFiddle here:
http://jsfiddle.net/q4pf6/

getting individual atrributes while selecting a class with JQuery

I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?

change this line as:
alert($(this).attr('alt'));

When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();

$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.

Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().

jQuery removeClass except on current id

[ Live Demo ]
I have a navigation menu that displays a certain state when hovered and also displays text in a different div.
In the event that the user does not interact with the menu, the divs auto cycle on their own and the navigation menu displays the corresponding hover state as if the user were interacting.
However, as it is cycling, if the user hovers over another link on the navigation menu, I need to removeClass on the previously highlighted element.
How do I write, "if id is not currently hovered id, then removeClass('hoverBold') on all other navigation links"

Look at jQuery not().
Something like...
$('.myMenu').hover(function() {
$('.myMenu').not(this).removeClass('hoverBold');
});

Just add this to hoverIn:
links.removeClass('hoverBold');
You don't need to take the class off the other elements, because the current element, a:hover.sliderLinks, shares styling with hoverBold
Working example: http://www.jsfiddle.net/MXSkj/1/

Something like this?...
$('#nav li').mouseover(function(){
//remove from others
$('#nav li').removeClass('hoverBold');
//add to this
$(this).addClass('hoverBold')
});

one way to do this would be to remove the hoverBold class on all links and add the it on the current link.
$(".sliderLinks").hover(function(){
$(".sliderLinks").removeClass("hoverBold");
$(this).addClass("hoverBold");
},function(){
//..resume the automatic behaviour
});
Other would be to use the .is() method inside the function passed to $(".sliderLinks").each() to see if its current element

Look at .filter
$(".myMenu").click(function() {
// store current object
var that = this;
$(".myMenu").filter(function() {
// check object in list is not current object
return this != that;
}).removeClass("hoverBold");
});
Basically you pass a filtering function and every object is tested. If the filter returns false (i.e. this == that) then the object is removed from the list.