So I have this structure on a online website:
<div class="main">
<div class="child-one"></div>
<div class="child-one"></div>
<div class="child-two"></div>
<div class="child-two"></div>
</div>
Now I want to find the number of .child-two in the base div using pure jquery, preferably using the structure: $(selector).someFunction().
I already tried these:
$('.main .child-two').length; //does not work -> undefined
$('.main').find('.child'); // does not work -> Uncaught TypeError: $(...).find is not a function
Which do not work.
Any ideas?
Thanks in advance.
It seems you do not have include jQuery on your main directory, and this code $('.main .child-two').length which you are provided works perfectly fine. You can try this either jQuery or javaScript Thanks.
e.g.
/* JQUERY */
console.log($('.main .child-two').length);
/* JAVASCRIPT */
var parent = document.querySelector(".main").children;
parent[2].innerHTML = "Hello World"; // examples
parent[2].classList.add("active"); // examples
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child-one"></div>
<div class="child-one"></div>
<div class="child-two"></div>
<div class="child-two"></div>
</div>
Related
Topics, Specialist, Text
I have segments that look like little cards with words in them. I would like to unhide a description for the specific word when the user hovers over them.
The code I have is as follows with the concerned classes being "specialist", "specialist-text":
const spec = document.querySelector('.specialist')
const spect = document.querySelector('.specialist-text')
spec.addEventListener('mouseenter', () => spect.classList.remove('hidden'))
.hidden {
display: none;
}
<section class="topics">
<h3 class="large center my-1">Topics</h3>
<div class="width grid overflow">
<div class="topic-list-update">
<div class="card2 center btn2 specialist">Specialist</div>
</div>
<div class="topics-text">
<div class="specialist-text hidden">Specialist mathematics 1234</div>
</div>
</div>
</section>
And I don't understand why it's not working. I attempted with addEventListener('mouseover'), I have tried using document.getElementById and I tried to use a function instead of an arrow function.
I am receiving an error when launching the html file in firefox:
Uncaught TypeError: spec is null
<anonymous> http://127.0.0.1:5500/js/script.js:12
I am a complete beginner and I thank you in advance for your help.
The answer was to load the script at the very end of the body!
<body>
<div> What ever 1 2 3 4 <br/> 1 2 3 4</div>
<img>
<script src="script.js"></script>
</body>
I am trying to dynamically load HTML and CSS data from another page in my website project.
Suppose I have 2 pages. First one is onepage.html and second one is twopage.html. Now I have some HTML and CSS (CSS is in external sheet) data in twopage.html that I would like to feed into onepage.html.
Suppose I have a structure for twopage.html like in the snippet below:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.col-sm-3{
background-color: green;
height: 100px;
color: white;
}
<div class="container">
<div class="row">
<div class="col-sm-3">
<p>Hello</p>
</div>
<div class="col-sm-3">
<p>Hello</p>
</div>
<div class="col-sm-3">
<p>Hello</p>
</div>
<div class="col-sm-3">
<p>Hello</p>
</div>
</div>
</div>
Now the data in twopage.html is dynamic, meaning that I add a set of new divs (in case of this example, a .col-sm-3) that replaces the old ones in a row class. This effect is something similar to appending.
I would like to load everything that is inside row class to onepage.html (with accompanying CSS). How could I do that? This is probably a task for JavaScript but I have no idea what is even the starting point here. What methods to use? I program my backend using Node.js and Express.js (if this comes in handy for figuring out a solution).
Don't know if i got you right... You can use jQuery and load your second file (on same Server) via $.get
In onepage.html for example:
<script>
$(function () {
$.get("twopage.html", function (data) {
$('.result').html($(data).find('.row').html());
});
});
</script>
and a div.result element in the body where to paste the filtered data:
<div class="result"></div>
How can I remove all elements found by a class name.
I want to do this using the dojo framework.
Try with this:
dojo.query(".class_name").forEach(dojo.destroy);
DEMO
Try the below code.
<div id="list">
<div class="odd">One</div>
<div class="even">Two</div>
<div class="odd">Three</div>
<div class="even">Four</div>
<div class="odd">Five</div>
<div class="even">Six</div>
</div>
dojo.query(".odd").forEach(function(node, index, nodelist){
// for each node in the array returned by dojo.query,
// execute the following code
dojo.remove(node);
});
Referred below links :
https://dojotoolkit.org/reference-guide/1.7/dojo/destroy.html
http://dojotoolkit.org/documentation/tutorials/1.6/using_query/
Thanks,
Siva
I've ran into a weird issue today, I'm hoping someone else can help me figure this out.
The project that I'm working on is more-or-less a jQuery slideshow. I have a super simple file that I'm loading to test everything out, it looks something like this:
<!doctype html public "(╯°□°）╯︵ ┻━┻">
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="slides" data-slidesShow="holder">
<div class="slide" id="test1">test div 1</div>
<div class="slide" id="test2">test div 2</div>
<div class="slide" id="test3">test div 3</div>
</div>
<button id="previous">previous</button>
<button id="next">next</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/slides.js"></script>
<?php include 'footer.php'; ?>
</body>
</html>
Again, nothing even remotely fancy here.
Now, in jQuery I'm getting and parsing the page like:
$.ajax({
url: target.path,
dataType: "html",
complete: function(data){
var $slides = $('[data-slidesShow="holder"]', $(data.responseText));
console.log($slides); // returns []
}
});
BUT! $slides returns an empty array, unless I wrap it in a meaningless div, like:
<div class="stupid-wraper-div-that-i-dont-want-or-need">
<div id="slides" data-slidesShow="holder">
<div class="slide" id="test1">test div 1</div>
<div class="slide" id="test2">test div 2</div>
<div class="slide" id="test3">test div 3</div>
</div>
</div>
and now:
console.log($slides); // returns [<div id="slides" data-slideShow="holder">...</div>]
I've read over the jQuery docs on this (http://api.jquery.com/jQuery/) and other StackOverflow conversations, but none of them explain why I would need a wrapper div to have results returned.
Any ideas? I know it's not a huge issue, but I don't want to have to hack a fix when I could find the root of the problem.
...
TL;DR: jQuery's select in scope only works with a weird wrapper div
When you pass a context to $(), you're asking the selector to look among its descendants for the given element (this works like .find()). Without your wrapper div, the element you're looking for is the context element, so your selector won't be able to find it since it's looking inside it instead.
You should use .filter() instead, which filters a set of elements instead of searching their descendants:
var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');
You need to use filter.
$(data.responseText).filter('[data-slidesShow="holder"]')
The html and body tags get stripped by the browser leaving their content.
I'm using Dojo toolkit version 1.3.1. I have defined the following dijit in a jsp page:
<div dojoType="dijit.layout.BorderContainer" gutters="false" id="ui_container">
<div dojoType="dijit.Toolbar" region="top">
<div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon">Zoom In</div>
</div>
<div dojoType="dijit.layout.BorderContainer" gutters="false" region="center">
<div dojoType="dijit.layout.ContentPane" id="mapPane" region="center"><div>hi</div>
</div>
</div>
</div>
In the onload event for my body tag I specify a function with this code in it:
var container_id = "ui_container";
// blah blah blah some stuff in the middle here
dijit.byId(container_id).resize({h: new_container_height});
And I get this error when viewing the page: dijit.byId(container_id) is undefined.
It works if I add a check to exit the function and call it again in 100 ms when this value is undefined, but that's a sloppy hack. Is there some more precise way to know when dijits are available for use?
It doesn't really mention this very clearly in the docs I read, but it looks like dojo.addOnLoad was what I was looking for.
Thanks!