CODEWITHSUNDEEP
javascriptjquery
hiteshtr
hiteshtr

Reputation: 563

selecting grandchild onclick event

I have written some jquery code to select the div which is grandchild of another div having id pageContainer2 on which user clicked and show a alert message with index value. But the code is node working at all, so please see if i am writing the code wrong or is their any other problem.

Following is my html page code with jquery script :

<script>
$("div#pageContainer2 div.textLayer div").click(function () {
  // this is the dom element clicked
    var index = $("div").index(this);
    alert("index of div is = " + index);
});
</script>

<div id="pageContainer2" >
<canvas id="page2" width="741" height="959"></canvas>
<div class="textLayer">
<div>......some text here....</div>
<div>......some text here....</div>
<div>......some text here....</div>
</div>
</div>

<div id="pageContainer3" >
<canvas id="page3" width="741" height="959"></canvas>
<div class="textLayer">
<div>......some text here....</div>
<div>......some text here....</div>
<div>......some text here....</div>
</div>
</div>

Upvotes: 0

Views: 965

Answers (4)

naim shaikh
naim shaikh

Reputation: 1111

Place you code in $(document).ready and change #textLayer to .textLayer hiteshtr it is working as you want just check this one.

$(document).ready(function () {
    $("#pageContainer2 > .textLayer > div").click(function () {
        // this is the dom element clicked
        var index = $("#pageContainer2 > .textLayer > div").index(this);
        alert("index of div is = " + index);
    });
});

Upvotes: 1

Juicy Scripter
Juicy Scripter

Reputation: 25938

Well, click event doesn't binded at all, since textLayer is a class not id, but you selecting by id.

Change selector to be:

$("div#pageContainer2 div.textLayer div")

It's also not clear which index you wan't to show, since what you currently use will return index of specific div tag in a whole document. In case you want an index within parent you better use something like:

var el = $(this);

var index = $('div', el.parent()).index(this);
// Or
var index = el.prevAll().length;

Upvotes: 1

adeneo
adeneo

Reputation: 318342

<script type="text/javascript">
    $(function() {
        $(".textLayer > div", "#pageContainer2").click(function () {
            var index = $(this).index();
            alert("index of div is = " + index);
        });
    });
</script>

<div id="pageContainer2" >
    <canvas id="page2" width="741" height="959"></canvas>
    <div class="textLayer">
        <div>......some text here....</div>
        <div>......some text here....</div>
        <div>......some text here....</div>
    </div>
</div>

<div id="pageContainer3" >
    <canvas id="page3" width="741" height="959"></canvas>
    <div class="textLayer">
        <div>......some text here....</div>
        <div>......some text here....</div>
        <div>......some text here....</div>
    </div>
</div>​

FIDDLE

Upvotes: 1

David Thomas
David Thomas

Reputation: 253485

There's a few issues.

  1. You don't appear to be using a $(document).ready() event, so the event is bound to no elements, since they're not in the DOM yet.
  2. You're trying to find a div of id="textLayer", which doesn't exist (you have class="textLayer".
  3. You're passing a selector to the index() method, this selector is supposed to define the elements among which you want to find the position of this particular object. There is only ever one this element (even jQuery's each() method works with one element at a time, from first to last...). So remove that particular selector.

So, corrected code:

$(document).ready(
    function(){
    $("div#pageContainer2 div.textLayer div").click(function () {
      // this is the dom element clicked
        var index = $("div").index();
        alert("index of div is = " + index);
    });
});

JS Fiddle demo.​

References:

Upvotes: 2

Related Questions