CODEWITHSUNDEEP
jqueryclassindexingparent-child
Chris
Chris

Reputation: 309

jquery: how do I find index of child divs with the same class

Here's the problem; I have a div which contains child divs within itself and I can't seem to access the child divs. What I need is to find the index with .eq90 for each of the child divs.

Here's the code that generates the parent.

function makeSmallBlockdiv ()
{
var smallBlock = $('<div class="SmallBlock EditBlock"></div>').appendTo("#canvas");
smallBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 150}})
smallBlock.append('<div class="article_title EditBlock fontCenter fontBold font24">Article Title</div>')
smallBlock.append('<div class="article_Image"><img style="width: 250px;" src="<? echo $image1 ?>"></div>')
smallBlock.append('<div class=" article_text font14"><? echo substr($article_text, 0, 200) ?></div>')   
}

This function can be called as often as needed to create more parent divs. What I have tried so far is the following:

$(".article_text").click(function() {
  alert("Index: " + $(this).index());
});

I have wrapped this in a function ready() with change. This code comes from a fiddle I found here http://jsfiddle.net/fY6SU/48/

The fiddle code works perfectly, but mine does nothing. When I look at my html with firebug, I can see the divs are gettig created properly. I am stumped and it doesn't help that I am just starting out with jquery.

Any suggestions will be much appreciated.

Thanks

Chris

Upvotes: 0

Views: 1103

Answers (4)

Chris
Chris

Reputation: 309

I was able to figure out how to get the index() for the siblings.

Here is the code that I used to find them.

$("div").children(".article_text").eq(3).css("color", "red");

The css selector is just there as a visual aid to confirm its working.

THanks to all who helped me.

Upvotes: 0

bobthyasian
bobthyasian

Reputation: 943

What I need is to find the index with .eq90 for each of the child divs.

Here:

var ninetyChildren = new Array(); //create an array to hold the children
$(".parent").each(function() { //loop through each parent
    var ninety = $(this).children().eq(89).text(); //get index of 90 - eq starts with 0
    ninetyChildren.push(ninety); //add 90th index to array
});

$.each(ninetyChildren, function(i, data){ //loop through 90th indexes
alert(i +" "+ data); //alert each 90th index
});
​

Hope this is what you wanted. Mock Demo

Upvotes: 0

Priyesh Gupta
Priyesh Gupta

Reputation: 33

Your Solution Lies in your class names. $(".article_text") select only the last div and , Consider renaming as per classnames in the example fiddle

Upvotes: 0

Anton
Anton

Reputation: 107

$(".article_text").click(function() {
  alert("Index: " + $(this).index());
});

The selector is only selecting the class 'article_text', and the html you generate only contains one div with the class 'article_text', so the solution is to add a class to the divs with the same name or use muliple selector, like this: 

$(".article_text, .article_Image, .article_title, .SmallBlock").click(function() {
  alert("Index: " + $(this).index());
});

Upvotes: 2

Related Questions