jquery第n个孩子到root答案

【问题标题】：jquery nth child to rootjquery第n个孩子到root
【发布时间】：2019-03-10 06:09:47
【问题描述】：

$(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”类视为这些段落的父元素？谢谢。

【问题讨论】：

你的问题完全不清楚。
每次调用该函数时，您都将i 设置为1。然后你永远不会使用它。如果你想在调用之间记住一些东西，它应该是一个全局变量。
你在哪里使用你的 i？
所有段落都是它们各自 div 中的第一个子段落，因此 p:nth-child(1) 匹配所有段落。
我怀疑你想要的是$("p").eq(i)。

标签： javascript jquery html

【解决方案1】：

选择所有段落元素并在点击时将它们一一突出显示

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>

【讨论】：

这几乎可以解决问题。是否可以将该亮点从一个 p 转移到另一个？
谢谢。但是如果我想从一个 p 滚动到另一个呢？很抱歉没有说明这个问题的主要目的。我会编辑它。
滚动动画？？
是的。如果可能的话。
查看这个答案stackoverflow.com/questions/31905765/…

【解决方案2】：

将i 声明为全局变量。然后只增加它的值
并使用 jquery eq() 函数匹配 p 索引
并以.parent p为目标
使用类添加和删除来切换颜色

更新带有切换颜色

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>

【讨论】：

这几乎可以解决问题。是否可以将该亮点从一个 p 转移到另一个？
谢谢。但是如果我想从一个 p 滚动到另一个呢？很抱歉没有说明问题的主要目的。我会编辑它。
检查这个答案。它和你需要的一样stackoverflow.com/questions/54803901/…
会检查的。谢谢