Question

I’m just learning jQuery, I’m so noob.

see, we have 2 divs as follows:

<div id="div1">
<ul>
    <li> This is Line 1</li>
    <li> This is Line 2</li>
    <li> This is Line 3</li>
    <li> This is Line 4</li>
    <li> This is Line 5</li>
</ul>
</div>

<div id="div2">
<ul>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
    <li> <input type="text" /></li>
</ul>
</div>

since I’m just learning change() function, this is what I want to do:
When each value of input boxes in div2 changes, the div1 li of the same number should be changed to the entered value, for example if we start typing in the second input box in div2, the second li text should go what we entered in the second input box.

here is what i’ve tried so far, but not working:

<script type="text/javascript">
    $(document).ready(function(){
        $('#div2 :input').change(function(i){
            var str = $(this).text;
            $('#div1 li').eq(i).text(str);
        });
    });
</script>

what’s wrong with this?
Thanks in advance

Answer 1

The parameter passed to the change() function isn’t the index. It’s an event object. You need to get the index yourself, using index().

Also, text() is the wrong method here, you need to use val() to get the value of the input.

$('#div2 :input').change(function() {
    var str = $(this).val(), // You need to use `val` to get the value (also, note the "()" here)
        index = $(this).parent().index(); // this gets the index of the input
    $('#div1 li').eq(index).text(str);
});​

DEMO: http://jsfiddle.net/skram/UJBCr/1/