jQuery第n个孩子到根

Question

$(document).click(function(){
  var i = 1;
  $("p:nth-child("+i+")").scrollintoview();
  i++;
});

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollintoview/1.8/jquery.scrollintoview.js"></script>

<div class="parent">
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
</div>

我在这里有此代码。我正在尝试使每次点击都具有搜索功能。如何使用这种html结构在每次点击时一一搜索这些段落。是否有任何选择器会将“ .parent”类视为这些段落的父元素？谢谢。

Answer 1

1. 将i声明为全局变量。然后仅将其值递增
2. 并使用jquery eq()函数匹配p索引
3. 并用.parent p
定位
4. 使用添加和删除类来切换颜色

已更新，带有切换颜色

var i = 0;
$(document).click(function(){
  $('.parent').find("p").removeClass('yellow').eq(i).addClass('yellow')
  i++;
});

.yellow{
 background-color:yellow;
}

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<div class="parent">
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
</div>

Answer 2

选择所有段落元素，然后单击并使用i突出显示它们

var i = 0;
$(document).click(function() {
$('p').css("background-color", "")
  $(Object.values($("p"))[i]).css("background-color", "yellow");
  i++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

<div class="parent">
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
  <div>
    <p>Hi</p>
  </div>
</div>