jQuery sortable（） - 如何检查两个 <li> 课堂上的元素彼此相邻？

Question

I am developing a display builder for outdoor power equipment dealers, in which they can add, remove, and rearrange product display sections as they see fit. I used a <ul> with JQuery-ui sortable() to do this:

This is the sortable <ul> , called #display-sections

<ul id="display-sections">
</ul>

When a button is pressed to add a section(blower, chainsaw, hedge trimmer, trimmer, accessories, PAS, cordless), a <li> is appended with the appropriate class.
For example, if I click on the button to add a blower section, a <li> is added with the class echo-blower-section :

function addBlowerSection() {
  $("#display-sections").append('<li class = "echo-blower-section"><img src = "echo-blower-section.jpg" width = "145" height = "288"></li>');
}

There are two display sections, the PAS and Cordless Sections, classes echo-pas-section and echo-cordless-section that I want to check if they are NOT next to each other, since it is recommended that these two sections stay together in a showroom.

How would I do this using JavaScript/JQuery? I would like to present an alert if the echo-pas-section and echo-cordless-section list items are NOT next to each other in the <ul>

Answer 1

I've not tested, but I think something like this should do the trick :-)

var cordless = $("#display-sections li.echo-cordless-section");
var pas = $("#display-sections li.echo-pas-section");

if(cordless.length && pas.length && !cordless.next('li').is(pas) && !pas.next('li').is(cordless)){
    alert('!');
}