javascript - jQuery:查找类外的元素

Question

我想选择容器外部符合我的条件的第一个元素。
如果它在内部，我知道如何找到它，但当它在外部时，我不确定。
我想只选择它找到的第一个元素，这是我的尝试:

   $('.text').click(
    function(){
        $(this).css('font-size', '50px');
        $(this).next('span').css('color','red');

        });

.one{
  background:orange;
  border:1px solid black;
  height:200px;
  width:200px;
}
span{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">

  <p class="text">
  text
  </p>
 
</div>
<span>First</span>
<span>Second</span>
<div class="one">

  <p class="text">
  text
  </p>
 
</div>
<span>First</span>
<span>Second</span>
<div class="one">

  <p class="text">
  text
  </p>
 
</div>
<span>First</span>
<span>Second</span>

所以，在我的例子中。如果单击标记为“文本”的橙色框中的第一个文本，它将直接将其外部的范围的颜色更改为红色。盒子上方和下方。它不会影响其他跨度，只会影响第一个跨度。

Answer 1

$('.text').click(
    function(){
        $(this).css('font-size', '50px');
        $(this).parent().next('span:first').css('color','red');

        });

.one{
  background:orange;
  border:1px solid black;
  height:200px;
  width:200px;
}
span{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">

  <p class="text">
  text
  </p>
 
</div>
<span>First</span>
<span>Second</span>
<div class="one">

  <p class="text">
  text
  </p>
 
</div>
<span>First</span>
<span>Second</span>
<div class="one">

  <p class="text">
  text
  </p>
 
</div>
<span>First</span>
<span>Second</span>