2

$.post()のデータ応答を、liそれを呼び出した の高さに追加する方法を探しています。

完了したことは知っていますが、それについて読むものは何も見つかりません。それで、何かアイデアはありますか？

図式

  • リスト項目1

  • リスト項目 2

  • リスト項目 3、ここをクリック:

                          * sublist item1
                      * sublist item2
                      * sublist item3

  • リスト項目 4

アップデート

私が持っている唯一のコードは作業$.post()でありconsole.log(data)、応答を確認するためだけに実行します。

わかりました、私はこのようなことを達成したいと思います: http://www.alistapart.com/d/horizdropdowns/horizo​​ntal.htmの$.post()応答

4

3 に答える 3

1

これを試して

        var data;
        $(document).ready(function()
        {

            $(".list li").click(function()
            {
                $.post("filename.php",function(res)
                {
                     data="<li>"+res+"</li>";           
                });
                $(this).after(data);
            });
        });     

<body>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
于 2012-05-16T09:26:10.780 に答える
1 
$('li.clickable').on('click', function() {
  var list = $(this);
  $.ajax({
      url: 'url_to_script',
      method: 'post',
      success: function(res) {

         var response = $(res); // assume that you response contains li tags i.e '<li>subitem 1</li>' and more
         list.append(response); // append response to list that clicked

         /* >> OR  << */
         // if you response contains data as array/field
         $.each(res, function(index, data) {
            list.append('<li>'+ data['some_text'] +'</li>'); // some_text is assumed property, you have something else
         });

        // ACCORDING TO YOUR COMMENT
        var sublist = '<ul>';
        $.each(res, function(index, data) {
            sublist += '<li>'+ data['some_text'] +'</li>'; // some_text is assumed property, you have something else
         });
            sublist += '</ul>'; // now sublist is like <ul><li>...</li>....</ul>
        list.append(sublist); // append the sublist to ul.clickable
      }
  });
});

注: 外観を改善するには、CSS を作成する必要があります。

于 2012-05-16T09:27:06.270 に答える
1

それがどのように見えるかについてのアイデア....

 $('yourliclass').click(function(){
       //do ajax
       $.ajax({
        .......
        .......

        success:function(data){ //data needs to be in json format
           var htmlcontent = "";
        htmlcontent = '<ul>';
        for(var i=0;i<data.length;i++){
        htmlcontent += '<li>'+data[i]['your_index']+'</li>';
    }
    htmlcontent += '</ul>';
        }
$(this).appendTo(htmlcontent);


});

}

于 2012-05-16T09:25:32.770 に答える