jQuery .length returns 0
I just want to count a div with the class of "element" inside another div with the class of "parent". This is the HTML structure:
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>The .length array / property works fine like this with jQuery:
$("div.parent > div.element").length;If I copy and paste the code above into the Chrome console I get 2 as a result, which is correct.
But if I try to make it a variable:
var $numEx = $("div.parent > div.element").length;It doesn't work correctly. For example, if I put numEx (or $numEx) in the console, I get 0 as a result...
This is the whole code together:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>I have actually got some normal javascript before the jQuery...
What am I doing wrong?
javascript jquery html css
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
|
show 6 more comments
I just want to count a div with the class of "element" inside another div with the class of "parent". This is the HTML structure:
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>The .length array / property works fine like this with jQuery:
$("div.parent > div.element").length;If I copy and paste the code above into the Chrome console I get 2 as a result, which is correct.
But if I try to make it a variable:
var $numEx = $("div.parent > div.element").length;It doesn't work correctly. For example, if I put numEx (or $numEx) in the console, I get 0 as a result...
This is the whole code together:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>I have actually got some normal javascript before the jQuery...
What am I doing wrong?
javascript jquery html css
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
Did you mean$("div.parent > div.element").length?
– Ele
Oct 17 '18 at 22:20
Where isdiv.examens? Do you not meandiv.parent? Are you sure you're using the exact same selector in both expressions?
– Robin Zigmond
Oct 17 '18 at 22:21
Oops yeah sorry I changed it now
– Rooibo Quallity
Oct 17 '18 at 22:22
put the whole code together, the order is important .. the JS before or after will lead to different result and we need to see how you are doing
– Temani Afif
Oct 17 '18 at 22:22
1
actually you shared the HTML alone and the JS alone, we don't know when you are calling the JS .. we need to see all the code as one block
– Temani Afif
Oct 17 '18 at 22:25
|
show 6 more comments
I just want to count a div with the class of "element" inside another div with the class of "parent". This is the HTML structure:
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>The .length array / property works fine like this with jQuery:
$("div.parent > div.element").length;If I copy and paste the code above into the Chrome console I get 2 as a result, which is correct.
But if I try to make it a variable:
var $numEx = $("div.parent > div.element").length;It doesn't work correctly. For example, if I put numEx (or $numEx) in the console, I get 0 as a result...
This is the whole code together:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>I have actually got some normal javascript before the jQuery...
What am I doing wrong?
javascript jquery html css
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
I just want to count a div with the class of "element" inside another div with the class of "parent". This is the HTML structure:
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>The .length array / property works fine like this with jQuery:
$("div.parent > div.element").length;If I copy and paste the code above into the Chrome console I get 2 as a result, which is correct.
But if I try to make it a variable:
var $numEx = $("div.parent > div.element").length;It doesn't work correctly. For example, if I put numEx (or $numEx) in the console, I get 0 as a result...
This is the whole code together:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>I have actually got some normal javascript before the jQuery...
What am I doing wrong?
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div><div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>$("div.parent > div.element").length;$("div.parent > div.element").length;var $numEx = $("div.parent > div.element").length;var $numEx = $("div.parent > div.element").length;<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $numEx = $("div.examens > div.element").length;
</script>
<div class="parent">
<div class="element">Element 1</div>
<div class="element">Element 2</div>
</div>javascript jquery html css
javascript jquery html css
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
edited Oct 17 '18 at 22:31
Rooibo Quallity
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
asked Oct 17 '18 at 22:18
Rooibo QuallityRooibo Quallity
12
12
Did you mean$("div.parent > div.element").length?
– Ele
Oct 17 '18 at 22:20
Where isdiv.examens? Do you not meandiv.parent? Are you sure you're using the exact same selector in both expressions?
– Robin Zigmond
Oct 17 '18 at 22:21
Oops yeah sorry I changed it now
– Rooibo Quallity
Oct 17 '18 at 22:22
put the whole code together, the order is important .. the JS before or after will lead to different result and we need to see how you are doing
– Temani Afif
Oct 17 '18 at 22:22
1
actually you shared the HTML alone and the JS alone, we don't know when you are calling the JS .. we need to see all the code as one block
– Temani Afif
Oct 17 '18 at 22:25
|
show 6 more comments
Did you mean$("div.parent > div.element").length?
– Ele
Oct 17 '18 at 22:20
Where isdiv.examens? Do you not meandiv.parent? Are you sure you're using the exact same selector in both expressions?
– Robin Zigmond
Oct 17 '18 at 22:21
Oops yeah sorry I changed it now
– Rooibo Quallity
Oct 17 '18 at 22:22
put the whole code together, the order is important .. the JS before or after will lead to different result and we need to see how you are doing
– Temani Afif
Oct 17 '18 at 22:22
1
actually you shared the HTML alone and the JS alone, we don't know when you are calling the JS .. we need to see all the code as one block
– Temani Afif
Oct 17 '18 at 22:25
Did you mean
$("div.parent > div.element").length?– Ele
Oct 17 '18 at 22:20
Did you mean
$("div.parent > div.element").length?– Ele
Oct 17 '18 at 22:20
Where is
div.examens? Do you not mean div.parent? Are you sure you're using the exact same selector in both expressions?– Robin Zigmond
Oct 17 '18 at 22:21
Where is
div.examens? Do you not mean div.parent? Are you sure you're using the exact same selector in both expressions?– Robin Zigmond
Oct 17 '18 at 22:21
Oops yeah sorry I changed it now
– Rooibo Quallity
Oct 17 '18 at 22:22
Oops yeah sorry I changed it now
– Rooibo Quallity
Oct 17 '18 at 22:22
put the whole code together, the order is important .. the JS before or after will lead to different result and we need to see how you are doing
– Temani Afif
Oct 17 '18 at 22:22
put the whole code together, the order is important .. the JS before or after will lead to different result and we need to see how you are doing
– Temani Afif
Oct 17 '18 at 22:22
1
1
actually you shared the HTML alone and the JS alone, we don't know when you are calling the JS .. we need to see all the code as one block
– Temani Afif
Oct 17 '18 at 22:25
actually you shared the HTML alone and the JS alone, we don't know when you are calling the JS .. we need to see all the code as one block
– Temani Afif
Oct 17 '18 at 22:25
|
show 6 more comments
1 Answer
1
active
oldest
votes
I believe you are trying to reach the property of an element before its properties are available through Jquery. @osama had mentioned this in a comment.You can either place the script tag at the bottom of your Document or inside $(document).ready(function(){}). This function will let the document object model render before executing your script.
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52864400%2fjquery-length-returns-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe you are trying to reach the property of an element before its properties are available through Jquery. @osama had mentioned this in a comment.You can either place the script tag at the bottom of your Document or inside $(document).ready(function(){}). This function will let the document object model render before executing your script.
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
add a comment |
I believe you are trying to reach the property of an element before its properties are available through Jquery. @osama had mentioned this in a comment.You can either place the script tag at the bottom of your Document or inside $(document).ready(function(){}). This function will let the document object model render before executing your script.
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
add a comment |
I believe you are trying to reach the property of an element before its properties are available through Jquery. @osama had mentioned this in a comment.You can either place the script tag at the bottom of your Document or inside $(document).ready(function(){}). This function will let the document object model render before executing your script.
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
I believe you are trying to reach the property of an element before its properties are available through Jquery. @osama had mentioned this in a comment.You can either place the script tag at the bottom of your Document or inside $(document).ready(function(){}). This function will let the document object model render before executing your script.
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
answered Oct 17 '18 at 22:36
Cesar PerezCesar Perez
595
595
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52864400%2fjquery-length-returns-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you mean
$("div.parent > div.element").length?– Ele
Oct 17 '18 at 22:20
Where is
div.examens? Do you not meandiv.parent? Are you sure you're using the exact same selector in both expressions?– Robin Zigmond
Oct 17 '18 at 22:21
Oops yeah sorry I changed it now
– Rooibo Quallity
Oct 17 '18 at 22:22
put the whole code together, the order is important .. the JS before or after will lead to different result and we need to see how you are doing
– Temani Afif
Oct 17 '18 at 22:22
1
actually you shared the HTML alone and the JS alone, we don't know when you are calling the JS .. we need to see all the code as one block
– Temani Afif
Oct 17 '18 at 22:25