jquery nth child to root

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>

I have here this code. I'm trying to make a search feature on every click. How can I search for these paragraphs one by one on every click with this structure of html. Is there any selector that will treat the ".parent" class as the parent element of these paragraphs? Thank you.

You're setting `i` to `1` every time you call the function. Then you never use it. If you want to remember something between calls, it should be a global variable. — Barmar, Mar 10 '19 at 06:12
All your paragraphs are the first child in their respective divs, so `p:nth-child(1)` matches all of them. — Barmar, Mar 10 '19 at 06:13

prasanth · Answer 1 · 2019-03-10T06:30:52.863

1

Declare i as a global.Then only its increment the value
And use jquery eq() function its match the p index
And target with .parent p
Do with class add and remove for switching color

Updated with switching color

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>

edited Mar 10 '19 at 06:30

answered Mar 10 '19 at 06:16

prasanth

19,775
3
25
48

this almost do the trick. Is it possible to shift that highlight from one p to another? – Muyie Mar 10 '19 at 06:19
Thank you. But what if i want to scroll from one p to another? Sorry for not stating the main purpose on the problem. I'll edit it. – Muyie Mar 10 '19 at 06:31
check this answer .It will same as you need https://stackoverflow.com/questions/54803901/how-to-scroll-to-next-div-using-javascript/54804025#54804025 – prasanth Mar 10 '19 at 06:34
Will check that. Thank you – Muyie Mar 10 '19 at 06:36

ellipsis · Answer 2 · 2019-03-10T06:25:02.140

1

Select all the paragraph elements and on click using i highlight them one by one

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>

edited Mar 10 '19 at 06:25

answered Mar 10 '19 at 06:17

ellipsis

11,498
2
13
33

this almost do the trick. Is it possible to shift that highlight from one p to another? – Muyie Mar 10 '19 at 06:24
Thank you. But what if i want to scroll from one p to another? Sorry for not stating m main purpose on the problem. I'll edit it. – Muyie Mar 10 '19 at 06:31
scroll animation?? – ellipsis Mar 10 '19 at 06:33
Yes. If possible. – Muyie Mar 10 '19 at 06:46
Check this answer https://stackoverflow.com/questions/31905765/javascript-scroll-from-one-div-to-the-other-when-scrolling – ellipsis Mar 10 '19 at 06:56

jquery nth child to root

2 Answers2