function returning wrong index value

Question

hello in my web page some portion of DOM element are generated dynamically and I created a function in jquery to get the index value of the DOM element on mousedown event. But my function always returns 7. this is my dom structure and function code:

<div id = "viewer">
<div id="pageContainer1" >
    <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="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>
</div>

<script>
    var indexInital, pageStr, containerStr, selector;
    //function for highlighting
    $(function() {
    $(window).scroll(function(){
        pageStr = String(PDFView.page);
        containerStr = "\"#pageContainer".concat(pageStr);
        selector = containerStr.concat(" > .textLayer > div\"");    
        });
});

    $(function() {
    $('#viewer').on('mousedown', selector ,function () {   
       indexInitial = $(this).index();
       console.log(indexInitial);   });
});

</script>

In the above code only div with id viewer is static, the div inside it are dynamically generated

What are you expecting selector to be when $('#viewer').on('mousedown', selector, ... gets executed? And are you sure that indexInitial is coming out as 7 rather than 0? — mu is too short
– mu is too short, Commented May 11, 2012 at 5:57
selector format is similar to this "#pageContainer[number of page] > .textlayer > div" and yes the outcome of indexInitial is 7 — hiteshtr
– hiteshtr, Commented May 11, 2012 at 6:03
But selector is modified by the scroll handler and that probably won't be triggered until after selector is used in the on call. So, selector is undefined when it is used. Perhaps you should set up a demo on jsfiddle.net, something doesn't add up here. — mu is too short
– mu is too short, Commented May 11, 2012 at 6:08

mu is too short · Accepted Answer · 2012-05-11 07:17:43Z

I'm guessing that you really want to find the index of this with respect to the <div>s in its .textLayer. So given this:

<div class="textLayer">
    <div>......some text here....</div>
    <div>Pancakes</div>
    <div>......some text here....</div>
</div>

if you click on <div>Pancakes</div> you'd want to get one. If that's right, then you want to bind your handler like this:

$('#viewer').on('mousedown', '.textLayer div', function() { /* ... */ });

and you can throw away your selector variable completely. Then, inside the handler, you could do this:

$(this).siblings().add(this).index(this);

to get the local index of this or you could do this:

$(this).closest('.textLayer').find('div').index(this);

Demo: http://jsfiddle.net/ambiguous/U97DG/

The siblings function looks sideways for elements at the same depth as this, then we put this into the set using add; that gives us this and its siblings in one set of elements so we can use index(this) to find out where this is in that set.

The other approach goes back up the DOM to the closest <div class="textLayer"> using closest and then grabs all the <div>s inside it using find; for your HTML structure, that gives us the set of elements that siblings and add do so we can using index(this) again to find out where this is.

Either approach will continue to work as you add and remove <div class="textLayer"> elements or the <div>s inside them.

Collectives™ on Stack Overflow

function returning wrong index value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related