Develop Reference

Select a div insinde another div with jQuery

So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.

var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div

The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.

Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector

use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});

You need to use .find() or .children() or the like.

The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page

You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]

One another solution is:
$("#Stage_game_page1 div[id='cube0']")

how to clear or Empty list box using jquery on dropdown event change

Can any body help me out how to clear the items in the list box on dropdown event change.
$(function () {
$("#ddlLevelColumn").change(function () {
$("#lstCodelist") ------ I need to clear this listbox1
$("#lbxSelectedItems")--------------- need to clear list box 2
});
});
<%:Html.ListBox("lstCodelist", Model.CodeListDefaultValue, new { style = "width:99%;height:297px;" })%>
<%:Html.ListBox("lbxSelectedItems", Model.AffectedCodeListboxData, new { style = "width:99%;height:297px;color:blue;" })%>
Thanks for your help..

empty()
$("#lstCodelist").empty()
$("#lbxSelectedItems").empty()

You can remove all entries (or apply filters as well):
$('#listBoxId > option').remove(); // all options
$('#listBoxId > option[val!=""]').remove(); // keep non-empty values
That what you're going for? I believe even simpler:
$('#listBoxId').empty();
Should work as well.
Working Demo: http://jsfiddle.net/jEWe6/

I think .empty() is what you're looking for.
Remove all child nodes of the set of matched elements from the DOM.
http://api.jquery.com/empty/

You can clear select html elements with something like this:
var clear = function() {
$("#lstCodelist").empty().append('<option value="whatever">Wait for reload</option>');
$("#lbxSelectedItems").empty().append('<option value="whatever">Wait for reload</option>');
});

Try this....
$('#listBoxId').empty();

you can also try any of this two approach.
$('#RolesListAvailable').html('');
OR
$('#RolesListAssigned').empty();

Search through document and find all inputs with titles

I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?

I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/

$("input[title]").not('[title=""]')

var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute

Find control in javascript or JQuery

I have a dynamic html table generated using javascript. the table contains diffrent controls like textbox,dropdown box which has custom attributes.How can I loop through all the controls present inside this table and find the control whose custom attribute matches to some value?

This will give you all the form elements inside your table (:input selector):
var $formElements = $('#tableid').find(':input');
You can filter with an attribute selector:
//will select every form element having a data-custom attribute set to 5
var $formElements = $('#tableid').find(':input[data-custom="5"]');
Please see the jsFiddle Demo. For my examples I used HTML5 data- attributes, but the code will work with any attribute you need.
OR you can use the filter() method to write a function that filters your elements:
var $formElements = $('#tableid').find(':input').filter(function () {
return $(this).attr('data-custom') == '5';
});
jsFiddle Demo with filter()

Demo : http://jsfiddle.net/DSqZr/1/
function getControl(_value){
$("#panel :input").each(function(){
if($(this).attr("custom") == _value){
return $(this);
}
})​
}
var selectedCrl = getControl(1);

You can use Attribute Contains Selector.
Check the example it is probably very close to what you need which is finding input & select elements with certain attribute values

Give them a class .control and:
$('.control[attribute=value]')
Check Selectors API for more on attribute selectors.

How to use in jQuery :not and hasClass() to get a specific element without a class

I have this line of code:
$('#sitesAccordion .groupOfSites').click(function() {
var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');
console.log(lastOpenSite);
});
I get "false" instead of getting one of the other elements (assuming that there is one - and there must be). I guess the problem is with:
.hasClass(':not(.closedTab)');
What is the problem?
My purpose is to create my own accordion (without using jQuery UI)
and I am trying to write it like this:
$('#sitesAccordion .groupOfSites').click(function() {
//Get the last opened tab
var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');
//Close last opened tab and add class
lastOpenSite.hide().toggleClass('closedTab');
//Open the current Tab
$(this).children('.accordionContent').toggle('fast');
// remove class from open tab
$(this).toggleClass('closedTab');
});
Is this the best way?
thanks,
Alon

Use the not function instead:
var lastOpenSite = $(this).siblings().not('.closedTab');
hasClass only tests whether an element has a class, not will remove elements from the selected set matching the provided selector.

It's much easier to do like this:
if(!$('#foo').hasClass('bar')) {
...
}
The ! in front of the criteria means false, works in most programming languages.

jQuery's hasClass() method returns a boolean (true/false) and not an element. Also, the parameter to be given to it is a class name and not a selector as such.
For ex: x.hasClass('error');

You can also use jQuery - is(selector) Method:
var lastOpenSite = $(this).siblings().is(':not(.closedTab)');

I don't know if this was true at the time of the original posting, but the siblings method allows selectors, so a reduction of what the OP listed should work.
$(this).siblings(':not(.closedTab)');