javascript-如何使jQuery检测特定元素内的HTML元素？

Question

I am trying to detect the current position of cursor when button is clicked. However my script is only able to detect the position of the cursor according to the text, not counting the html elements. How do I make this function to detect and count the html elements too ? Example below.

html

<div>This is a text</div>        <!-- If cursor is at after the word 'is', 
                                 position should be 7 -->
<div><ul><li>This is text with ul and li elements</li></ul></div>    
                                 <!-- If cursor is at after the word 'is',
                                 position should be 15 (counting the ul and li elements) -->
<button class='button'>Button</button>

js

$(document).ready(function() {
    $('.button').click(function() {
        var position = window.getSelection().getRangeAt(0).startOffset;
        alert(position);
    });
});

Jsfiddle

http://jsfiddle.net/mjgcyy3x/

Answer 1

Maybe something like this :

HTML:

<div class="container">This is a text</div>
<div class="container"><ul><li>There is ul and li elements here</li></ul></div>
<button class='button'>Button</button>

JavaScript:

$(document).ready(function() {
    $('.button').click(function() {
        var text = window.getSelection().anchorNode
        if(text) {
            var container = $(text).closest(".container");
            var htmlLength = container.html().indexOf(text.textContent);
            var position = window.getSelection().getRangeAt(0).startOffset;
            alert(htmlLength + position);
        }
    });
});

Answer 2

This should work:

$(document).ready(function() {
    $('.button').click(function() {
        var position = window.getSelection().getRangeAt(0).startOffset;

        var selection = window.getSelection();
        if (selection.rangeCount > 0) {
            var container = $(selection.getRangeAt(0).startContainer.parentNode).closest('div');
            var text = container.text();
            var htmlText = container.html();
            position += htmlText.indexOf(text);
        }

        alert(position);
    });
});

jsFiddle