.closest（）返回undefined

Question

我有以下列表：

<div id="saved">
    <ul class="list-group" style="display: block;">
        <li class="marked list-group-item">box-shadow:<span class="marked_text">0px 0px rgb(200,200,200)</span>;<a class="pull-right multiple-shadows checkbox-active">Click</a>
        </li>
    </ul>
</div>

现在我想存储变量内部的文本。

我写了以下代码：

$("body").on("click", "#saved ul li > a.multiple-shadows", function () {

    $(this).toggleClass("checkbox-active");

    var roll = $(this).closest("span").text();
    console.log(roll);
});

问题是，使用.text（）我得到一个空值并且.html（）我得到undefined.Any ideas？

Answer 1

$.closest()获取父级（https://api.jquery.com/closest/）。你需要的是$(this).siblings("span")。还尝试限制jQuery中的选择器数量。 $('a.multiple-shadows')绰绰有余。

编辑：如果您有多个跨栏兄弟，要获得第一个，请使用$(this).siblings("span").first()

Answer 2

closest找到元素的最近祖先。 span是您a代码的兄弟，因此closest返回undefined是正确的。你的a位于li内，ul位于div内，因此这些是closest将返回任何内容的唯一元素

Answer 3

由于您的范围位于a标记之前，因此您可以使用.prev()函数。

$(this).toggleClass("checkbox-active");
var roll = $(this).prev().text();
console.log(roll);

小提琴：http://jsfiddle.net/hp9or7pf/

Answer 4

.closest＆＃34;通过测试元素本身并遍历DOM树中的祖先来匹配选择器＆＃34; （https://api.jquery.com/closest/）。因此，.closest不会匹配任何兄弟姐妹，而是祖先。相反，您可以使用.prev()。

$("#saved").on("click", ".multiple-shadows",function(){

    $(this).toggleClass("checkbox-active");

    var roll=$(this).prev().text();
    alert(roll);
});