我的 HTML 有一个包含许多同级元素的容器元素div元素，每个元素包含一个contenteditable p。这些兄弟姐妹div然而，被其他人“打断”div其中不包含可编辑元素。
目前对我来说挑战的是如何“跳过”这些干扰div使用左右箭头键从 C 移动到 D 或从 D 返回到 C 时（请参阅代码片段）。遇到这些情况时导航会停止div缺少可编辑元素。我该如何纠正这个问题？
$('#foo p[contenteditable = "true"]').bind("keydown", function(e) {
switch (e.key) {
case "ArrowLeft":
var $P = $(this).parent().prev().children('p[contenteditable = "true"]');
setTimeout(() => $P.focus(), 0);
e.stopImmediatePropagation();
e.preventDefault();
break;
case "ArrowRight":
var $P = $(this).parent().next().children('p[contenteditable = "true"]');
setTimeout(() => $P.focus(), 0);
e.stopImmediatePropagation();
e.preventDefault();
break;
}
});
#foo p[contenteditable="true"] {
/* font-size: 22px;*/
height: 22px;
width: 22px;
color: cyan;
font-weight: bold;
background-color: cyan;
}
#foo p.const {
background-color: inherit;
border: none;
height: 22px;
width: 22px;
}
#foo div {
text-align: center;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
<div>
<p contenteditable="true" tabindex="0"></p>
<p>A</p>
</div>
<div>
<p contenteditable="true" tabindex="1"></p>
<p>B</p>
</div>
<div>
<p contenteditable="true" tabindex="2"></p>
<p>C</p>
</div>
<div>
<p class="const"> </p>
<p> </p>
</div>
<div>
<p class="const">"</p>
<p>"</p>
</div>
<div>
<p contenteditable="true" tabindex="3"></p>
<p>D</p>
</div>
<div>
<p contenteditable="true" tabindex="4"></p>
<p>E</p>
</div>
</div>
代替prev() or next(), use .prevAll(":has(p[contenteditable])").first() and .nextAll(":has(p[contenteditable])").first():
$('#foo p[contenteditable = "true"]').bind("keydown", function(e) {
switch (e.key) {
case "ArrowLeft":
var $P = $(this).parent().prevAll(":has(p[contenteditable])").first().children('p[contenteditable = "true"]');
setTimeout(() => $P.focus(), 0);
e.stopImmediatePropagation();
e.preventDefault();
break;
case "ArrowRight":
var $P = $(this).parent().nextAll(":has(p[contenteditable])").first().children('p[contenteditable = "true"]');
setTimeout(() => $P.focus(), 0);
e.stopImmediatePropagation();
e.preventDefault();
break;
}
});
#foo p[contenteditable="true"] {
/* font-size: 22px;*/
height: 22px;
width: 22px;
color: cyan;
font-weight: bold;
background-color: cyan;
}
#foo p.const {
background-color: inherit;
border: none;
height: 22px;
width: 22px;
}
#foo div {
text-align: center;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
<div>
<p contenteditable="true" tabindex="0"></p>
<p>A</p>
</div>
<div>
<p contenteditable="true" tabindex="1"></p>
<p>B</p>
</div>
<div>
<p contenteditable="true" tabindex="2"></p>
<p>C</p>
</div>
<div>
<p class="const"> </p>
<p>
<p>
</div>
<div>
<p class="const">"</p>
<p>"
<p>
</div>
<div>
<p contenteditable="true" tabindex="3"></p>
<p>D</p>
</div>
<div>
<p contenteditable="true" tabindex="4"></p>
<p>E</p>
</div>
</div>
prevAll https://api.jquery.com/prevAll//nextAll https://api.jquery.com/nextAll/匹配与选择器匹配的所有前一个/后一个同级，返回一个 jQuery 对象in order（所以最近的兄弟姐妹是第一个，然后是第二个最近的兄弟姐妹，依此类推）；使用.first()然后将集合减少到最近的兄弟姐妹。
我用过:has https://api.jquery.com/has-selector/伪选择器，但你最好给相关元素一个类，因为:has是 CSS 中特定于 jQuery 的补充。在这里我使用了该类stop所以就是.xxxxAll(".stop").first():
$('#foo p[contenteditable = "true"]').bind("keydown", function(e) {
switch (e.key) {
case "ArrowLeft":
var $P = $(this).parent().prevAll(".stop").first().children('p[contenteditable = "true"]');
setTimeout(() => $P.focus(), 0);
e.stopImmediatePropagation();
e.preventDefault();
break;
case "ArrowRight":
var $P = $(this).parent().nextAll(".stop").first().children('p[contenteditable = "true"]');
setTimeout(() => $P.focus(), 0);
e.stopImmediatePropagation();
e.preventDefault();
break;
}
});
#foo p[contenteditable="true"] {
/* font-size: 22px;*/
height: 22px;
width: 22px;
color: cyan;
font-weight: bold;
background-color: cyan;
}
#foo p.const {
background-color: inherit;
border: none;
height: 22px;
width: 22px;
}
#foo div {
text-align: center;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
<div class="stop">
<p contenteditable="true" tabindex="0"></p>
<p>A</p>
</div>
<div class="stop">
<p contenteditable="true" tabindex="1"></p>
<p>B</p>
</div>
<div class="stop">
<p contenteditable="true" tabindex="2"></p>
<p>C</p>
</div>
<div>
<p class="const"> </p>
<p>
<p>
</div>
<div>
<p class="const">"</p>
<p>"
<p>
</div>
<div class="stop">
<p contenteditable="true" tabindex="3"></p>
<p>D</p>
</div>
<div class="stop">
<p contenteditable="true" tabindex="4"></p>
<p>E</p>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
