/    Sign up×
Community /Pin to ProfileBookmark

jQuery (nth-child(x)) issue

Hello there,
I’ve learning jQuery since short time and this is a training example where I have 2 buttons and a div
the 2 buttons; (one create paragraph and appends it to the div and the other buttons remove the last paragraph from the div).

the creation button has no problem. The problem in the hide button, instead of hiding the last paragraph in the div, it returns a problem in the nth-child (Uncaught Error: Syntax error, unrecognized expression: :nth-child)
I attached 2 images for the html and js codes
and also here is the written code if someone wants to copy

HTML Code:


**********

<!DOCTYPE html>
<html>
<head>
<title>jQuery Training</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
<body>
<button class=”btnCreate”>create</button>
<button class=”btnHide”>hide</button>
<div class=”parent”></div>

<script src=”js/jquery-3.3.1.min.js”></script>
<script src=”js/plugins.js”></script>
</body>

</html>
——————————————————————————————————-

JS Code:


*******

$(function(){

//create new paragraph
//*********************

$(‘.btnCreate’).on(‘click’,function(){
$(‘.parent’).append(‘<p class=”item”>this is new paragraph</p>’)

})

//hide last paragraph
//********************

$(‘.btnHide’).on(‘click’,function(){
var count_p = $(‘.item’).length – 1
$(“p:nth-child(count_p)”).fadeOut()
})

})
———————————————————————————————————–

I hope the description is clear.
Thanks <3
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2019-01-06/1546803091-148949-html.jpeg]
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2019-01-06/1546803091-246477-js.jpeg]

to post a comment

15 Comments(s)

Copy linkTweet thisAlerts:
@rootJan 06.2019 — 
  • 1. JQuery IS NOT JAVASCRIPT.

  • 2. Please don't post images of code, it is not at all helpful.
  • Copy linkTweet thisAlerts:
    @rootJan 06.2019 — [[2,4],[2,52]]
    Copy linkTweet thisAlerts:
    @SempervivumJan 06.2019 — The error is here:
    $("p:nth-child(count_p)").fadeOut()
    The value of the variable is not inserted, but the string of the variable name instead.

    This should be correct:
    $("p:nth-child(" + count_p + ")").fadeOut()
    Copy linkTweet thisAlerts:
    @HanyTauthorJan 07.2019 — @root#1599636 thanks, l will consider this note in my next post.
    Copy linkTweet thisAlerts:
    @HanyTauthorJan 07.2019 — @Sempervivum#1599638 yup, that solved the issue, but another problem appeared.

    I try now to fade out the selected paragraph using a for loop, but instead of this it hides all the paragraphs.

    Where is the error in that code?

    Here is the code:

    $(function(){

    //create new paragraph
    //*********************

    $('.btnCreate').on('click',function(){
    $('.parent').append('<p class="item">this is new paragraph</p>')

    })

    //hide last paragraph
    //********************



    $('.btnHide').on('click',function(){
    var count_p = $('.item').length
    for (var i = count_p ; i > 0; i--) {
    $('p:nth-child('+i+')').fadeOut(2000)
    }
    })

    })
    Copy linkTweet thisAlerts:
    @SempervivumJan 07.2019 — As the context of this code is not visible I'm a bit unsure what your intention is. When I read "hide last paragraph" I guess that this should do the job:
    $('.btnHide').on('click',function(){
    $('p:last-child').fadeOut(2000)
    })


    On the other hand you write: " to fade out the selected paragraph". In order to do this one needs to know how a selected paragraph can be identified. Is there a certain class? Or does it have focus?
    Copy linkTweet thisAlerts:
    @NogDogJan 07.2019 — @root#1599636 JQuery IS NOT JAVASCRIPT.[/quote]

    Sure it's JavaScript, just like Laravel is PHP and Rails is Ruby. Yes, it's a specific use of JavaScript, and yes, we have a separate JavaScript Frameworks sub-forum; but when you write JQuery code, it must be within a JavaScript block.

    The fact that you, personally, do not like frameworks in general and JQuery in particular does not warrant such a misleading statement, IMHO.
    Copy linkTweet thisAlerts:
    @rootJan 08.2019 — This is where I differ in opinion because... JQuery may be written in JavaScript BUT that does not make the language JavaScript.

    For one, add JQuery script in and will it run, no, you have to load in a support library that takes the JQuery, performs JavaScript actioons on DOM and DOM responds which I have always found ridiculous way of working when you have JavaScript that is a step closer.

    Adding a Layer to a Layer only slows things down and I question the use of it as it is also an "Eggs in one basket" approach, you only need a vulnerability or a bug and you either have to fix it yourself or report it and wait for the update.

    At least when you code your own code you know what is in there, it will be ultra light weight.

    At least with HTML5 it does away with the majority of code needed where supported.
    Copy linkTweet thisAlerts:
    @HanyTauthorJan 08.2019 — @Sempervivum#1599681 I used ( nth-child (i) ) so that I can loop the last paragraph, while If i used (last-child), I can't loop the last paragraph. If you have an idea to loop using (last-child), pls let me know it.
    Copy linkTweet thisAlerts:
    @SempervivumJan 08.2019 — Still I don't understand what your intention is. Can you post some sample HTML and describe more detailed?
    Copy linkTweet thisAlerts:
    @HanyTauthorJan 10.2019 — @Sempervivum#1599723 no problem, I made another model hoping I can explain my idea.

    Here I have 3 elements (1 div and 2 buttons):

    - Div the contains the (p) that will be created with jQuery

    - Button to create a paragraph and append it to the div

    - Button to hide the last (p) in the div

    Let's say that I pressed the (add) button 5 times, that will create 5 paragraphs and append them to the div.

    Great!! That works fine.

    Now I will press the (hide) button to hide the last (5th) paragraph (that what I intend to do). But instead of hiding the 5th(last) paragraph, it hides ALL paragraphs in the div. (that's the problem).

    I hope my explain is clear and also I attached the HTML , jQuery codes:

    1- HTML
    -------------


    <body>

    <div class="parent">

    <button class="add">click to add a paragraph</button>

    <button class="hide">click to hide last paragraph</button>

    </div>

    <div class="content">
    <!-- Here are the added paragraphs (added using jQuery after pressing the add button)-->
    </div>

    <script src="jQuery v1.12.4.min.js"></script>
    <script src="plugins.js"></script>
    </body>


    jQuery Codes:
    ---------------------


    $(function(){

    // add paragraph
    //***************
    var created_p = '<p>Created with jQuery</p>'
    $('.add').on('click',function(){
    $('.content').append(created_p)
    })

    //remove last paragraph
    //**********************
    $('.hide').on('click',function(){
    for (var i = $('.content p').length; i >= 0; i--)
    {$('.content p:nth-of-type('+i+')').fadeOut(1000)}
    })

    })

    Thanks for your patience <3
    Copy linkTweet thisAlerts:
    @SempervivumJan 10.2019 — Thanks for this explanation, now things are clear.

    This code works for me:
    //remove last paragraph
    //**********************
    $('.hide').on('click', function () {
    $('.content p:visible').last().fadeOut(1000);
    });

    Explanation:

    The pseudoclass :visible is necessary in order to get visible paragraphs only: After having faded out the last paragraph it's not visible but the element still exists. When using :last-child this element would be selected although it's already faded out.

    last() selects the last element in the set.

    Your original code using a loop removes [b]all[/b] paragraphs and works as it is coded.
    Copy linkTweet thisAlerts:
    @HanyTauthorJan 10.2019 — @Sempervivum#1599796 Excellent explanation. It works fine now.

    But i still don't understand why the loop removes all paragraphs ( I know you explained it, but I still don't understand ? )
    Copy linkTweet thisAlerts:
    @SempervivumJan 10.2019 —  for (var i = $('.content p').length; i &gt;= 0; i--)
    {$('.content p:nth-of-type('+i+')').fadeOut(1000)}

    E. g. there are three paragraphs, i. e. $('.content p').length is 3

    1st loop: paragraph number 3 is faded out

    2nd loop: paragraph number 2 is faded out

    3rd loop: paragraph number 1 is faded out

    Now all paragraphs are removed.

    If I read the docu correctly, the numbers are starting from 1, i. e. there is no nth-of-type(0).
    Copy linkTweet thisAlerts:
    @HanyTauthorJan 11.2019 — @Sempervivum#1599817 It's all clear now. Thanks. <3
    ×

    Success!

    Help @HanyT spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...