I have the following code with the intention of locating values from within a targeted div as follows:
$('#combineDiv').children().each(function(){
if ($(this + ":first-child").attr('class') == 'combinedColumn') {
alert('found ONE!');
}
});
I have a hidden input in some of the divs within the children of the div '#combineDiv'... but, I dont know how to combine the 'THIS' keyword with the appropriate selector... :(
remember this is going to return an object from the DOM, so $(this + ":first-child") probably isn't going to give you what you want (it'll probably return something like [object Object]:first-child.
Instead try accessing the ID, or whatever it is you're after, off of that this object
$(this.ID + ":first-child").attr('class')
$(this).filter(":first-child")
children().each and then a :first-child. Why don't you try putting all you HTML in the question then we can see from #combineDiv downNot sure what you're trying to do, but my assumption is that you want to look inside each child of the #combineDiv for a :first-child, that is a .combinedColumn
$("#combineDiv > * > .combinedColumn:first-child");
Use .filter("selectors"),i.e. $(this).filter(":first-child")....
In fact you could use $(this).filter(":first-child .combinedColumn") I believe.
use .find to travel more than one level down
$('#combineDiv').find(selector).each(
function(){
if ($(this + ":first-child").attr('class') == 'combinedColumn') {
alert('found ONE!');
}
});
You can use the has method to get the elements that has children that matches a selector, intead of looping through the children yourself:
$('#combineDiv').children().has('.combinedColumn:first-child').each(function(){
alert('found ONE!');
});
Example:
With this HTML:
<div id ="combineDiv">
<div><span class="none">1</span><span class="none">1</span></div>
<div><span class="none">2</span><span class="combinedColumn">2</span></div>
<div><span class="combinedColumn">3</span><span class="none">3</span></div>
<div><span class="combinedColumn">4</span><span class="combinedColumn">4</span></div>
</div>
This will match the third and fourth child div and make their background gray, as they have a first child with the class "combinedColumn":
$('#combineDiv').children().has('.combinedColumn:first-child').css('background', '#ccc');
.filter("selectors"),i.e.$(this).filter(":first-child")....