html结构:
<div class="row">
<div class="span"></div>
<div class="span"></div>
<div class="navMenu">
<ul>
<li><a href=#">Link 1</a></li>
<li><a href=#">Link 1</a></li>
</ul>
</div>
</div>
然后我在上面的 html 之后添加一个"new"div:
<div class="row">
<div class="span"></div>
<div class="span"></div>
<div class="navMenu">
<ul>
<li><a href=#">Link 1</a></li>
<li><a href=#">Link 1</a></li>
</ul>
</div>
</div>
<div class="new"></div>
$(".navMore li a").each(function() {
$(this).on("click", function() {
$('<div class="new"></div>').insertAfter($(this).closest('.row'));
$('<div class="span"></div>').appendTo('.new');
});
});
最后,我需要检查包含菜单的 div 后面是否存在类 .new
的 div,如果存在,则在其中添加 .span
div,然后如果类 .new
的 div 不存在,则创建它,然后在其中插入类 .span
的 div:
$(".navMore li a").each(function() {
$(this).on("click", function() {
if($(this).next().hasClass("new")){
$('<div class="span"></div>').appendTo('.new');
}
else {
$('<div class="new"></div>').insertAfter($(this).closest('.row'));
$('<div class="span"></div>').appendTo('.new');
}
});
});
重要的是,具有 .new
类的新 div 是紧邻菜单的 div 容器的具有此类类的 div。原因是因为我会使用许多带有许多不同 .row
div 的菜单,所以我想定位正确的一个。
上面的最终代码不起作用
最佳答案
您不需要每个循环 - 您还注意到 .new
和 .row
是 sibling 吗?
$(".navMore li a").on("click", function() {
var $el = $(this);
var $row = $el.closest('.row'); // <-- get to row first
if($row.next('.new').length){ // check next element
$('<div class="span"></div>').appendTo('.new');
}
else {
$('<div class="new"></div>').insertAfter($row);
$('<div class="span"></div>').appendTo('.new');
}
});
你的类(class)也混淆了..所以你需要确保它们匹配
<div class="navMenu"> <!-- <-- here -->
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
和
$(".navMore li a") // <-- here
关于javascript - 检查下一个元素是否具有特定的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14593222/