I am new to Javascript and jQuery.
I made a simple image slider and encounter an issue with jQuery.
I have the following html for my list of images:
<div id = "slider-auto">
<ul class= "slides">
<li class = "slide"><img src="Images/one.jpg"/></li>
<li class = "slide"><img src="Images/two.jpg"/></li>
<li class = "slide"><img src="Images/three.jpg"/></li>
<li class = "slide"><img src="Images/four.jpg"/></li>
<li class = "slide"><img src="Images/five.jpg"/></li>
<li class = "slide"><img src="Images/one.jpg"/></li>
</ul>
</div>
I am trying to store the 'li' elements inside a variable(array) and change the CSS of a specific 'li' element using jQuery.
The following works fine:
$(document).ready(function(){
$slideContainerMan = $('#slider-auto');
$mySlides = $slideContainerMan.find('.slide');
$mySlides[0].style.display = "block";
})
If I use jQuery to access the CSS of the first list element I get an error:
$(document).ready(function(){
$slideContainerMan = $('#slider-auto');
$mySlides = $slideContainerMan.find('.slide');
$mySlides[0].css('display','block');
})
The above code produces '$mySlides[0].css is not a function'.
I am assuming this is not the correct way of accessing array elements using jQuery.
How do I use jQuery to access 'li' elements singularly?
Thanks for your help in advance.
The numeric properties on a jQuery object reference DOM elements, not jQuery objects.
If you want to call jQuery methods, you have to wrap the element with a jQuery object.
$( $mySlides[0] ).css(...)
$mySlides[0] returns the li element, and not the jquery object, thus you can't use the css function on it.
What you can do is use the jQuery constructor on that element $(element) or use the first() function to get the wrapped element:
$(document).ready(function(){
$slideContainerMan = $('#slider-auto');
$mySlides = $slideContainerMan.find('.slide');
// option 1:
$($mySlides[0]).css('display','block');
// option 2:
$mySlides.first().css('display','block');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "slider-auto">
<ul class= "slides">
<li class = "slide"><img src="Images/one.jpg"/></li>
<li class = "slide"><img src="Images/two.jpg"/></li>
<li class = "slide"><img src="Images/three.jpg"/></li>
<li class = "slide"><img src="Images/four.jpg"/></li>
<li class = "slide"><img src="Images/five.jpg"/></li>
<li class = "slide"><img src="Images/one.jpg"/></li>
</ul>
</div>
Related
I'm new to jquery, ajax and jstree. I'm using jstree to have my <ul> elements look like a tree structure.
I have the <ul> under a div tag of id = "container". When I execute the html file, the div (id = "container") is passed to jstree function as follows:
$(function() {
$('#container').jstree();
});
My html snippet is as follows:
<div id="container">
<ul id = "treeNodes">
<li>Parent
<ul>
<li>Child1
<ul>
<li>child2-1</li>
<li>child2-2</li>
<li>child2-3</li>
<li>child2-4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The tree structure is being displayed fine.
I'm trying to write a jquery function that gets the li element's name as an argument.
For example: when I click Parent, the function should recieve "Parent" as an argument or when I click child2-3, the function should get "child2-3" as the argument.
I attempted to create that function, but it doesn't seem to work. Here's my attempt -
$("#treeNodes li").click(function() {
console.log("hello");
console.log(this.innerHTML);
});
The control seems to go to the function calling the jstree(), but the other function doesn't seem to work.
Any help or tips would be appreciated. Thanks in advance.
Making your structure into a JSTree causes new HTML to be created and those new elements have custom classes and new APIs. So, you have to read the documentation to understand how to use the new structure.
If you look at this documentation page, you'll see an example of what you are after, which hinges on a custom changed event. I've reproduced that example, customizing it for your HTML and console output.
$(function() {
$('#container')
// listen for the custom "changed" event on any jstree
.on('changed.jstree', function (e, data) {
// When you click on a JSTree the event appears to fire on the entire tree
// You'll have to iterate the tree nodes for the selected one.
var i, j, r = [];
for(i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text);
}
console.clear();
console.log('Selected: ' + r.join(', '));
})
// create the instance
.jstree();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<div id="container">
<ul id = "treeNodes">
<li>Parent
<ul>
<li>Child1
<ul>
<li>child2-1</li>
<li>child2-2</li>
<li>child2-3</li>
<li>child2-4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have read the documentation from the jstree page: https://www.jstree.com/
There is a class from the jstree called jstree-children, from that class you can obtain the value from the list, like this:
$(document).on('click', '.jstree-children ul li', function (e) {
console.log($(this).html());
});
Try this: https://jsfiddle.net/Mantixd/0jwpz2r1/
I have a WordPress generated menu that has this structure:
<li id="menu-item-407" class="smoothAboutScroll menu-item menu-item-type-custom menu-item-object-custom menu-item-407">
About Us
</li>
I want to target the <a> child and store it in a variable, so then I can create a onclick function that runs when the <a> element is clicked on.
This is what I have:
var aboutLink = $('#menu-item-407').children();
$('aboutLink').on('click', function() {
// run function
})
$('aboutLink') is looking for a <aboutLink></aboutLink> element that doesn't exist.
That selector string has nothing to do with the variable aboutLink which is now a jQuery object itself
Try
var aboutLink = $('#menu-item-407 > a');
aboutLink.on('click', function() {
// run function
})
Give the <a> element an id and then target it using jquery?
var myElement = $('#myLinkId');
Markup:
<ul>
<li role="presentation" class="active">
How to Install for iPad
</li>
<li role="presentation">
How to Install for Mac
</li>
<li role="presentation">
How to Install for PC
</li>
</ul>
When I use document.querySelectorAll('[role="presentation"]'); the result is array
[li.active,li,li]
How can I remove .active class and attach it to any other of these li with plain JS w/o JQuery the more simplest way?
Try this:
// remove active class from all elements
document.querySelectorAll('[role="presentation"]').forEach(function (el){
el.classList.remove("active");
});
// add class 'active' to last element
document.querySelectorAll('[role="presentation"]:last-of-type')[0].classList.add("active")
Notes:
'classList' will not work in IE9;
I think you have to modify adding class row, depending on your needs.
You can try something like this:
var ele = document.querySelectorAll('[role="presentation"]');
ele[0].classList.remove("active"); //Remove active class for first element
ele[ele.length- 1].classList.add("active"); //Apply active class for last element
console.log(ele)
var eleLi = document.querySelectorAll('[role="presentation"]');
for (var i = 0; i < eleLi.length; i++) {
//remove class active
eleLi[i].classList.remove('active');
}
//x is an index of li that you want to add the class. Such as 0,1,2
var x = eleLi.length - 1;
//add class active
eleLi[x].classList.add('active');
trying to figure out how to find a class and add a class to it using javascript. all example online are with id , I need to find the classs. Any idea guys?
I am adding a class once the page is loaded.
<nav class="menu custom-effect" id="customMenu">
<ul class="menu-list">
<li class="menu-item current_page_item">Home</li>
<li class="menu-item">Who we are</li>
<li class="menu-item">What we offer</li>
<li class="menu-item">Our news</li>
<li class="menu-item">Contact us</li>
</ul>
</nav>
<script>
document.addEventListener("DOMContentLoaded", function(){
// document.getElementById("current_page_item").classList.add( "current-page");
var element = document.getElementById("customMenu");
var elementClass = element.getElementsByClassName("current_page_item");
elementClass[0].ClassNames.add("extraClass");
console.log(element);
console.log(elementClass);
});
</script>
When you search for a class you get an array I understood and not just one element, so you need to referece the element u want as it picks up all the classes.
the answear to the code is
<script>
var element = document.getElementById("menu-main-menu");
var elementClass = element.getElementsByClassName("current_page_item");
elementClass[0].classList.add("foo");
</script>
classList implementation of these methods is super easy now that I understood the issue:
// adds class "foo" to el
el.classList.add("foo");
// removes class "bar" from el
el.classList.remove("bar");
// toggles the class "foo"
el.classList.toggle("foo");
// outputs "true" to console if el contains "foo", "false" if not
console.log( el.classList.contains("foo") );
// add multiple classes to el
el.classList.add( "foo", "bar" );
i have some code below:
<ul class="history">
<li class="hello"></li>
<li class="hi"></li>
<li class="yello"></li>
<div class="baby"></div>
<div class="kitty"></div>
</ul>
now i want remove some elements in ul, but i want hold 1 div or li (ex: div.baby) how can i do now? i want use click function.
with jQuery:
var babyElement = $('.baby') // save element for later
$('.yellow').remove() // remove element
with JavaScript:
var babyElement = document.querySelector('.baby')
var yellowElement = document.querySelector('.yellow')
if (yellowElement.parentNode) {
yellowElement.parentNode.removeChild(yellowElement)
}
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
maybe this is you want:
$('ul.history').children().not('.baby').remove();
demo