第一个条件正常工作，第二个不

Question

目标是从选项标签中获取值并将其放入 href。我对第一个和最后一个选项有疑问。当没有下一个选项时 - 带有按钮的块（条件响应），根本不显示。也许有人可以告诉我为什么？

JS:

$(".footer .upMenu").before("<p class='chapter-control'><a href=''>Previous chapter </a><a href=''>Next chapter</a></p>");

$(".chapter-control a:last-child").attr("href", function() {
    var valueNext = $("#chapter option:selected").next().val();
    if (valueNext.length != 0) {
        return valueNext;
    } else {
        return "#";
    }
});
$(".chapter-control a:first-child").attr("href", function() {
    var valuePrev = $("#chapter option:selected").prev().val();
    if (valuePrev.length != 0) {
        return valuePrev;
    } else {
        return "#";
    }
});

HTML:

Chapter<select id="chapter">
    <option selected="selected" value="http://......">Chapter 5</option>
    <option value="http://....">Chapter 6</option>
    <option value="http://....">Chapter 7</option>
</select>
<div class="footer">
</div>
<!-- footer end-->

Answer 1

最后我自己找到了解决方案：

JS:

$(".chapter-control a:last-child").attr("href", function() {
    var valueNext = $("#chapter option:selected").next();
    if (valueNext.length != 0) {
        return valueNext.val();
    }
});
$(".chapter-control a:first-child").attr("href", function() {
    var valuePrev = $("#chapter option:selected").prev();
    if (valuePrev.length != 0) {
        return valuePrev.val();
    }
});

我只需要检查一下，不是先前选项的属性值是否为空，而是是否存在。

第一个条件正常工作，第二个不

First condition works properly, second does not

jquery

next

option