jQuery：在类之外查找元素

Question

我想选择与我的容器OUTSIDE匹配的第一个元素。
我知道怎么找到它，如果它在里面但是当它在外面时，我不确定。
我想要只选择它找到的非常第一个元素，这是我的尝试：

   $('.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

请尝试此

$(this).parent().next('span:first').css('color','red');

FIDDLE DEMO

.parent()：获取当前匹配元素集中每个元素的父元素，可选择通过选择器进行过滤。

:first：给定一个表示一组DOM元素的jQuery对象，.first（）方法从该集合中的第一个元素构造一个新的jQuery对象。

Answer 2

这将找到点击div

上方和下方的第一个元素

$(this).parent().next('span:first').css('color','red');
$(this).parent().prev('span:first').css('color','red');

<强> WORKING FIDDLE

Answer 3

$('.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>

Answer 4

  

使用.parent()将返回上述元素的父元素。 .next()将返回当前元素的下一个元素。 :first将返回匹配元素中的第一个元素。

试试这个：

＆＃13;

＆＃13;

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

  });

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;