Detaching only the last child in parent using JSPlumb

Question

I am working on a project where we have objects in a 4-by-X grid. We are using JS Plumb to connect these objects, but we noticed when it connects object 4 to object 5, that the line makes an ugle diagnoal and ends up crossing behind the first row. Is there a way we can scope the Draw(); function to only first 4 objects? That way the 5th will still drop to a new line, but won't have the diagonal connectors.

Here is my JS Function

In my function, I use a class of no-lines on my object's parent element to define a group that will not get the drawLines(); function at all. I believe since I am drawing these based on the parent function, that I won't be able to stop the draw event for the last-child of my parent.

$(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();
        });
});

Here are some of the functions that I've tried

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

I also tried to detach based on my parent-container, but to no avail.

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

Since these projects tend to be pretty code-heavy, I created JSFiddle here were you can see what I have so far! I appreciate all the help with this! Thanks!

Answer 1

Okay, so I figured out a solution.

Since we have multiple 'sections' with a different amount of objects in each parent, I decided to build out a separate draw function. This one lets me choose where my lines start and stop in the drawing.

So here is my new 'draw' aka breakLines(); function.

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' }
      }); 
    });
  };

To get the added 1-4 on my dynamic divs, I used this function so they would be generated and then have the class added.

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

**Note, the divs are not dynamic in my fiddle, but on my live page they are :)

After fitting this function in with my exisiting JS, I was able to turn off the original drawLines(); function on the sections that had more than 4 objects, and replace it with this. You can see how the new breakLines(); function pipes my objects in this JSFiddle