如何使用jQuery切换ListItem的最后两个孩子

Question

I am having the list item which have some childs like..

  <li id="li1">Your Text 
      <a id="link1" href="#">click to enter</a>
      <input type="text" id="textbox1" value=""/>
      <input type="button" id="button1" value="Edit" />
   </li>

I want to hide and show the textbox and button when i click the link..

Please Help me..

Answer 1

you can do it like this

$('#link1').click(function(){
    $('#li1').children().slice(-2).toggle();
});
​

Live Demo

Answer 2

Something like this:

$(document).ready(function() {
    $("#idOfList li a").click(function(e) {
        e.preventDefault();
        $(this).siblings().toggle();
    });
});

The above assumes that you have something similar in each li element and you want to do the same action for all of them - for that to work you'd obviously put the id from the containing ul or ol element where I've said "#idOfList" .

Demo: http://jsfiddle.net/nnnnnn/j8NrE/

To do it only for the specific link with id="link1" just change the "#idOfList li a" selector to "#link1" .

Answer 3

By using jQuery .siblings() and .slideToggle() methods you can achieve it easily by the following lines of code:

jQuery:

$(".list-item a").on("click", function(event){           
    $(this).siblings().slideToggle();
    event.preventDefault();    
});​

HTML:

<ul>
    <li class="list-item">Your Text 
        <a id="link1" href="#">clike to enter</a>
        <input type="text" id="textbox1" value=""/>
        <input type="button" id="button1" value="Edit" />
    </li>

    <li class="list-item">Your Text 
        <a id="link2" href="#">clike to enter</a>
        <input type="text" id="textbox2" value=""/>
        <input type="button" id="button2" value="Edit" />
    </li>
</ul>​

SEE DEMO

Answer 4

Add this to your document:

<script type="text/javascript">
    $(function () {
        $('#link1').click(function () {
            $('#textbox1').toggle();
            $('#button1').toggle();
        });
    });
</script>

See it in action here:

http://jsfiddle.net/LC7LT/2/