Constraint the effect of JQuery Code


#23

No, we’re counting the number of <cheese>'s. So the answer should be 5. I gave you the x variable as a starting pointer.


#24

Ok so here we have to publish that number

<board type=“Cedar”></board>


#25

He’s trying to help you to understand the thought process that’s used to get information from the HTML, about what you need. Here’s a list of what’s needed, in reverse order working from the end, towards the start.

  • To get an answer of 5, you need to get a count of the number of cheeses.
  • To get that, you need to get all of the cheese elements inside of the sample object.
  • To get that, you need to get the parent of the x variable.

You should work through those from the bottom to the top, in terms of code, to make further progress.


#26

This is what i comeup with:

var x = $('board[type="Cedar"]').parent().find( "cheese").length();
console.log(x);

But this has some bug because console log is throwing error despite I have added JQUERY from the CDN.

This says that length is not a function. I implemented that also. still error, but number 5 is printing now in console log.

image


#28

Your codepen still has parenthesis on the length. Length is not a function, so remove the parenthesis from it. I saw that the error goes away after doing that.


#29

Done! I reverted that accidentally, previously.


#30

Correct :slight_smile: Now, apply that process, to your own code. We want to find the number of <div>s inside the parent of the button, and compare that number to 10. If it’s less than 10, run the line to add a row. Keep in mind that the button that was chosen is already defined as $(this) inside your function, so you don’t need to go hunting for it.


#31

Hi there @m_hutley and @Paul_Wilkins

This is how I did it:

var count = $('button[type="button"]').parent().find( "div").length;
				if(count !=10) {
					$('<div class="htmljs"><label for=""><h3>Subject 1</h3></label><input type="text" name="" value=""><input type="text" name="" value="">').insertBefore(this);
				}

But we are still not spot on. where am I going wrong? Intended functionalities are not yet attained.


#32

I told you in the previous post, don’t go hunting for the button. It’s already in your function as $(this)


#33

Hi there @m_hutley Then what should we hunt for because rest all are siblings:


#34

The event trigger has done it for you already; you dont need to hunt for anything. $(this) points to the button that was clicked on, whichever button it is. Replace $('button[type="button"]') with $(this) and it should work.


#35

If this one:

var count = $(this).parent().find( "div").length;

Then already tried sir, but didn’t deliver the anticipated results.

quite possible if condition is not coded correctly or correctly placed.


#36

define “didn’t deliver the anticipated results.”

What does it do that it shouldn’t, or what does it not do that it should?


#37

All semester should have maximum 10 subjects, but it is counting total 10 for all semesters.


#38

Can we please see the relevant HTML code, and the updated JavaScript code that you are currently using?


#39

Yes,

I have put it here:


#40

The x variable that you have there is now meaningless and useless., as the count serves that purpose instead.

Remove code that relates to the x variable and it should work. At least, it does when I did that.


#41

You havent removed the other if.


#42

My bad @m_hutley was asking me to focus on X I introduced a new variable count.

Yes, fixed. Its working now.


#44

If my understanding is right then previously we hard coded:

var x = 5;

You was expecting me to change this:

var x = $(this).parent().find( “div”).length;