Question

可以检测是否存在类（Is there an "exists" function for jQuery?）

是否可以检测其他两个类之间是否存在某个类？

<div class="A"></div>

// if class B is not here - between anything with A follow directly by C, then put in B

<div class="C"></div>

Answer 1

您可以在CSS中使用+ selector 。下面的代码将检查在B之后紧接着C和在A之后紧接着B是否放置

if ($('.A+.B+.C').length) {
  // Do something
} else {
  // Do something
}

Answer 2

如果每个.A的下一个邻居都不具有类B，则可以检查它。如果是这样，则在两者之间添加<div class="B"></div>。

jQuery

$(".A").each(function() {
    var a = $(this),
        n = a.next("div");
    
    if (n.length && n.hasClass("B") === false) {
        a.after('<div class="B">B</div>');
    }
});

.B { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A">A</div>
<div class="C">C</div>
<div class="A">A</div>

香草JS

document.querySelectorAll(".A")
        .forEach(a => {
            const n = a.nextElementSibling || { tagName: "" };
        
            if (n.tagName === "DIV" && n.classList.contains("B") === false) {
                a.insertAdjacentHTML("afterEnd", '<div class="B">B</div>');
            }
        });

.B { color: red }

<div class="A">A</div>
<div class="C">C</div>
<div class="A">A</div>

或者，如果您知道.A和.C，则可以使用adjacent sibling combinator (+)查找所有.C元素，它们是.A的直接同级。

jQuery

$(".A + .C").before('<div class="B">B</div>');

.B { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A">A</div>
<div class="C">C</div>
<div class="A">A</div>

香草JS

document.querySelectorAll(".A + .C")
        .forEach(c => {
          c.insertAdjacentHTML("beforeBegin", '<div class="B">B</div>');
        });

.B { color: red }

<div class="A">A</div>
<div class="C">C</div>
<div class="A">A</div>

是否可以检测其他div（类）之间是否存在div（类）？

2 个答案: