在没有父级或其他选择器的情况下，需要“ jQuery最接近”的帮助

Question

我是jQuery的新手，当我在不使用close的情况下应用jquery .css（）方法时，它可以正常工作，但是如果使用close方法，则该方法不起作用。

请参考摘要：

 //$('span').css("color","red");
$("body").delegate("button", "click", function () {
  $(this).closest('span').css("color","red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change color of span</button>
<span> Me Span here</span>

Answer 1

1. 正确拼写button
2. delegate已过时。不要使用它。请改用on。
3. closest搜索元素的祖先。您要查找的跨度不是祖先，而是同级。使用siblings。如果您有多个按钮并将所有跨度捆绑在一起，则也可以使用next()。

$("body").on("click", "button", function () {
  $(this).siblings('span:first').css("color","red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change color of span</button>
<span> Me Span here</span>

Answer 2

尝试一下... parent().find()

$('button').on('click', function() {
  $(this).parent().find('span').css("color","red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Click to change color of span</button>
<span> Me Span here</span>

多个跨度方案

$('button').on('click', function() {
  $(this).parent().find('span:first').css("color","red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> Me Span here</span>
<button>Click to change color of span</button>

<p>
paragraph
</p>
<span> Me Span here</span>