jquery - JQuery:クラスの特定の要素をデータで選択し、ターゲットとして使用する方法は?

Question

このチュートリアル ( http://gazpo.com/2011/09/contenteditable/ Demo: http://gazpo.com/downloads/tutorials/html5/contentEditable/ ) のコードを修正しました。データベースから contenteditable div を取得し、AJAX を介して、変更された の変更を保存します。

PHP が生成するものは次のとおりです: http://jsfiddle.net/fmdx/78rWQ/

    <div data-id="0" class="wrap"><!-- Content Wrapper -->
      <div data-id="0" class="status"></div>
    <div data-id="0" class="content">
    <p data-id="0" style="padding-left:7px;">
            <span data-id="0" style="padding-right:10px;">a)</span>
            <span data-id="0" data-primary="1" data-comcounted="0" data-showcom="1" data-fileno="CTTEST" data-part="1" class="editable" contenteditable="true">Compliance with the terms and conditions of the Clearwater Ordinance as currently set forth by the City of Sheboygan.</span></p>
        </div>
      <button data-id="0" class="save">Save</button>      
    </div>

そのテーブル内の行数を掛けます。

Jquery/Ajax は次のとおりです。 $(document).ready(function() {

    $(".save").click(function (e) {     
        //how do I narrow down these variables to that specific grouping being selected?
        var text = $('.editable').html();
        var primary_key = $('.editable').attr('data-primary');
        var showcom = $('.editable').attr('data-showcom');
        var comcounted = $('.editable').attr('data-comcounted');
        var part = $('.editable').attr('data-part');
        var fileno = $('.editable').attr('data-fileno');

        $.ajax({
            url: 'save.php',
            type: 'POST',
            data: {
            text: text,
            primary_key: primary_key,
            showcom: showcom,
            comcounted: comcounted,
            part: part,
            fileno: fileno              
            },              
            success:function (data) {

                if (data == '1')
                {
                    $(".status")
                    .addClass("success")
                    .html("Data saved successfully")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
                else
                {
                    $(".status")
                    .addClass("error")
                    .html("An error occured, the data could not be saved")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
            }
        });   
    });

    $(".editable").click(function (e) {
        $(".save").show();
        e.stopPropagation();
    });

    $(document).click(function() {
        $(".save").hide();  
    });
});

これに、データベースから返される行数を掛けます。

1 つの div を選択すると、すべての SAVE ボタンが表示され、データが保存されると、すべての div のステータス バーが表示されます。

私がやろうとしているのは、選択されたスパンの data-id 属性を取得して、ラッパー、ステータス、コンテンツ可食セクション、およびその保存バーに対して一意になるようにすることです。ある意味では、ラップされたセグメント全体の ID として機能しています。jquery/AJAX を変更して、コンテンツ編集可能な div が選択されたときに、その特定の div のみが変更され、保存ボタンがポップアップするようにするにはどうすればよいですか?そのステータスバーが表示されますか（すべてが表示されるのではなく）？