JSPlumbを使用して親の最後の子のみを切り離す

Question

私は4×2グリッドのオブジェクトを持つプロジェクトに取り組んでいます。 JS Plumbを使用してこれらのオブジェクトを接続していますが、object 4からobject 5に接続すると、そのラインは醜い診断を行い、最初の行の後ろで交差することに気付きました。 Draw();関数を最初の4つのオブジェクトに限定する方法はありますか？そうすれば、5番目はまだ新しいラインに落とされますが、斜めのコネクターはありません。

はここに私のJS関数私の機能で

ですが、私は全くdrawLines();機能を得ることはありませんグループを定義するために、私のオブジェクトの親要素にno-linesのクラスを使用します。私は親の関数に基づいてこれらを描画しているので、親のlast-childの描画イベントを停止できないと考えています。ここで

$(document).ready(function(){ 

     var drawLines = function(){ 
      $('.training-directory-methodology-stage-classes').not('.no-lines').each(function(){ 

       var newplumb = jsPlumb.getInstance(); 

       $(this).find('.training-directory-methodology-stage-class').each(function(index, value){ 
        current_class = $(this); 

        if(index>0) { 
         newplumb.connect({ 
          source: previous_class, 
          target: current_class, 
          anchor: "Center", 
          connector: "Straight", 
          endpoint: "Blank", 
          paintStyle:{lineWidth:6, strokeStyle:'#4A5C68' } 

         }); 
        }; 

        previous_class = current_class; 

       }); 
      }); 
     }; 

     jsPlumb.ready(function() { 
      drawLines(); 
     }); 

     $(window).resize(function(){ 
      $('._jsPlumb_connector').remove(); 
      drawLines(); 
     }); 
}); 

私はまた私の親コンテナをもとに取り外すしようとしたが、無駄に

$(document).ready(function(){ 
    jsPlumb.detachAllConnections('#jsPlumb_5_20'); 
    jsPlumb.removeAllEndpoints('#jsPlumb_5_20'); 
    jsPlumb.detach('#jsPlumb_5_20'); 
}); 

を試してみた機能の一部です。

jsPlumb.detach('convert-container:last-child'); 

これらのプロジェクトはかなりのコードを多用する傾向があるので、私はあなたが私がこれまで持っているものを見ることができましたここJSFiddleを作成しました！私はこのすべての助けに感謝します！ありがとう！

Answer 1

私は解決策を見つけました。

私たちは、各親に異なる量のオブジェクトを持つ複数の「セクション」を持っているので、私は別の描画機能を構築することに決めました。これは、私の行がどこで開始し、図面で停止するかを選択できるようにします。

私の新しい「ドロー」別名はbreakLines();です。

var breakLines = function(){ 
    // Check this class for the class of '.no-lines' 
    $('.training-directory-methodology-stage-classes').filter('.no-lines').each(function(){ 
     jsPlumb.Defaults.Endpoint = "Blank"; 
     var endpointOptions = { isSource: true, isTarget: true }; 
     //Use the iterative divs to find the first and fourth child 
     var convert1 = jsPlumb.addEndpoint($('.convert1'), { anchor: "Center" }, endpointOptions); 
     var convert4 = jsPlumb.addEndpoint($('.convert4'), { anchor: "Center" }, endpointOptions); 

     // New Connection 
     jsPlumb.connect({ 
     source: convert1, 
     target: convert4, 
     anchor: "Center", 
     connector: "Straight", 
     endpoint: "Blank", 
     paintStyle:{ lineWidth:6, strokeStyle:'#4A5C68' } 
     }); 
    }); 
    }; 

私の動的なdivタグに追加1-4を取得するには、それらが生成されますので、私はこの機能を使用して、クラスが追加されました。私exisiting JSでこの関数をフィッティングした後

$(document).ready(function() { 
    $(".convert-container").each(function(i) { 
    $(this).addClass("convert" + (i+1)); 
    }); 
}); 

は**注、div要素が私のバイオリンでは、動的ではありませんが、私のライブのページに、彼らは:)

あり、私はオフにすることができました元のdrawLines();は、4つ以上のオブジェクトを持つセクションで機能し、これで置き換えます。新しいbreakLines();関数がこの中で私のオブジェクトをどのようにパイプするのかを見ることができますJSFiddle