jquery - not able to display the needed content with the function - javascript

I have this jQuery script that I do not fully understand. I was wondering why I cannot replace the siblings('div') with a class or id? I think my code doesn't work properly. What I was trying to do is replace some content with a button click, and then the second content, replace it again with the second function.
All courses get replaced by faculties, but faculties dont get replaced by the departments, when I press on a department, they all show one under another
$(document).ready(function() {
$('.btnClick').on('click', function() {
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function() {
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h4>Search courses</h4>
<hr>
<br>
<ul>
<li class="btnClick" id="fac_1">Faculty of Mathematics and Informatics</li>
<ul>
<li class="btnClick2" id="dep_1">Mathematics and Informatics</li>
<ul>
<li>Informatics</li>
<li>Mathematics</li>
</ul>
</ul>
<li class="btnClick" id="fac_2">Faculty of Medicine</li>
<ul>
<li class="btnClick2" id="dep_2">Medicine</li>
<ul>
<li>Medical Sciences</li>
</ul>
</ul>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div>
<h3>All courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
<div id="fac_1_tab" style="display:none;">
<h3> Faculty of Mathematics and Informatics courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
</ul>
</div>
<div id="fac_2_tab" style="display:none;">
<h3> Faculty of Medicine courses</h3>
<ul>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
<ul>
<div id="dep_1_tab" style="display:none;">
<h3>Department of Mathematics and Informatics courses</h3>
<ul>
<li>
<a class="first" href=artificial-intelligence>Artificial Intelligence</a>
</li>
<li>
<a class="first" href=software-engineering>Software Engineering</a>
</li>
</ul>
</div>
</ul>
<ul>
<div id="dep_2_tab" style="display:none;">
<h3>Department of Medicine courses</h3>
<ul>
<li>
<a class="first" href=surgery>Surgery</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
Here is also the full code in django if helps: https://pastebin.com/y9tHNbax

Department cannot replace each other because they are not siblings. they are exist different ul. if all Department are same ul it work proparly
check it. it works as your need
jsfiddle link
$(document).ready(function () {
$('.btnClick').on('click', function () {
$('.col-md-9').find('[id^="dep"]').hide()
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
var department_id = $(this).attr('id');
$('#fac_' + department_id.split('_')[1] + '_tab').show().siblings('div').hide();
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});

I am not sure I completely understand your question
but you can try this
$(document).ready(function () {
$('.btnClick').on('click', function () {
$('.col-md-9').find('[id^="dep"]').hide()
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
$('.col-md-9').find('[id^="fac"]').hide()
$('.col-md-9').find('[id^="dep"]').hide()
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});

Related

JQuery - Change className with logic conditions

I am looking for modifying the class name of a div according to the name of another div.
I cannot make it work with JQuery.
Here is the html structure :
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-events/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Events
</li>
</ul>
</div>
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Conferences
</li>
</ul>
</div>
My goal is to modify the :
class="div-overlay"
According to the text value in :
class="category-item"
My attempt is not successful :
$(document).ready(function(){
var category = $(".category-item").html();
var newEvents = $(".div-overlay").attr('newclass','events');
var newConferences = $(".div-overlay").attr('newclass','conferences');
if (category = "Events"){
newEvents;
} else if (category = "Conferences") {
newConferences;
};
});
How can I make my script work ?
Details : working on Wordpress with elementor.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".category-item").each(function() {
var cat_val = $(this).html();
$(this).parents('.div-overlay').attr('newClass', cat_val);
});
});
</script>
</head>
<body>
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-events/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Events
</li>
</ul>
</div>
</div>
<div class="div-overlay">
<a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>
<div class="div-container">
<ul class="post-categories">
<li>
Conferences
</li>
</ul>
</div>
</div>
</body>
</html>
You should use addClass methd
$(document).ready(function(){
var category = $(".category-item").html();
if (category = "Events"){
$(".div-overlay").addClass('events');
} else if (category = "Conferences") {
$(".div-overlay").addClass('conferences');
};
});

How to select value of dropdown with ul

Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>

forEach only uses first element

I got some sort of HTML Code as a List with links in each list item. I want to get those with JavaScript and only log them first for later usage. It's a List of jobs wich have a title, link and location.
The code looks kinda like this:
var jobs = document.getElementsByClassName("offerlist-item");
var jobList = [].slice.call(jobs);
var jobAnchor;
var jobName;
var jobUrl;
var jobLocation;
jobList.forEach(function(job) {
jobAnchor = $('h3.styleh3').html();
jobUrl = $(jobAnchor).attr('href');
jobName = $(jobAnchor).text();
jobLocation = $("li.noBorder").text();
console.log(this.jobUrl);
console.log(jobName);
console.log(jobLocation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="offerlist-item">
<h3 class="styleh3">
<a href="someUrl1">
SomeTitle1
</a>
</h3>
<ul>
<li><li class="noBorder">someLocation1</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
<a href="someUrl2">
SomeTitle2
</a>
</h3>
<ul>
<li><li class="noBorder">someLocation2</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
<a href="someUrl3">
SomeTitle3
</a>
</h3>
<ul>
<li><li class="noBorder">someLocation3</li>
</ul>
</li>
</ul>
My problem is that only the first item is used in the forEach loop. Why is that so?
Firstly, your HTML is invalid. You've got an open li with no closing tag.
Secondly, the issue is because you're looking up every h3.styleh3 within each iteration of the loop. You should instead look at the ones inside the current job. You can do that using find(), like this:
var jobs = document.getElementsByClassName("offerlist-item");
var jobList = [].slice.call(jobs);
var jobAnchor;
var jobName;
var jobUrl;
var jobLocation;
jobList.forEach(function(job) {
jobAnchor = $(job).find('h3.styleh3').html();
jobUrl = $(jobAnchor).attr('href');
jobName = $(jobAnchor).text();
jobLocation = $(job).find("li.noBorder").text();
console.log(this.jobUrl);
console.log(jobName);
console.log(jobLocation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="offerlist-item">
<h3 class="styleh3">
SomeTitle1
</h3>
<ul>
<li class="noBorder">someLocation1</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
SomeTitle2
</h3>
<ul>
<li class="noBorder">someLocation2</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
SomeTitle3
</h3>
<ul>
<li class="noBorder">someLocation3</li>
</ul>
</li>
</ul>
However it's worth noting that you're using an odd mix of native JS methods and jQuery. It's best to use either one or the other. Here's a pure jQuery implementation:
$('.offerlist-item').each(function() {
var $job = $(this);
var $jobAnchor = $job.find('h3.styleh3 a');
var jobUrl = $jobAnchor.attr('href');
var jobName = $jobAnchor.text();
var jobLocation = $job.find("li.noBorder").text();
console.log(jobUrl);
console.log(jobName);
console.log(jobLocation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="offerlist-item">
<h3 class="styleh3">
SomeTitle1
</h3>
<ul>
<li class="noBorder">someLocation1</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
SomeTitle2
</h3>
<ul>
<li class="noBorder">someLocation2</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
SomeTitle3
</h3>
<ul>
<li class="noBorder">someLocation3</li>
</ul>
</li>
</ul>
There where a few problems:
Not necessarily a problem, but I replaces document.getElementsByClassName("offerlist-item") with the simple jQuery selector $('.offerlist-item'), which also reners [].slice.call(jobs) unnecessary
You always used the selector $('h3.styleh3') no matter what the currently looped job was. You can change that now, by using $a.find(sel). This will find all elements with the given selector "sel" that are children of "a".
var jobList = $('.offerlist-item');
var jobAnchor;
var jobName;
var jobUrl;
var jobLocation;
jobList.each(function() {
jobAnchor = $(this).find('h3.styleh3').html();
jobUrl = $(jobAnchor).attr('href');
jobName = $(jobAnchor).text();
jobLocation = $("li.noBorder").text();
console.log(this.jobUrl);
console.log(jobName);
console.log(jobLocation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="offerlist-item">
<h3 class="styleh3">
<a href="someUrl1">
SomeTitle1
</a>
</h3>
<ul>
<li><li class="noBorder">someLocation1</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
<a href="someUrl2">
SomeTitle2
</a>
</h3>
<ul>
<li><li class="noBorder">someLocation2</li>
</ul>
</li>
<li class="offerlist-item">
<h3 class="styleh3">
<a href="someUrl3">
SomeTitle3
</a>
</h3>
<ul>
<li><li class="noBorder">someLocation3</li>
</ul>
</li>
</ul>

What part of this jQuery .replace is not working?

I've read at least, ten different similar topics but haven't been able to figure out, what the problem is.
I am trying to change, part the url's in my header menu. Those url's, which contains "onepage" should be replaced with a hashtag.
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
$('$('a[href*="onepage"]')').each(function() {
var text = $(this).text();
$(this).text(text.replace(new RegExp("onepage","g"), "#");
});
JSFiddle
$('$('a[href *= "onepage"] ')').each(function() {
var text = $(this).text();
$(this).text(text.replace(new RegExp("onepage", "g"), "#");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
You should change the href instead of the text. Also, you have your css selector wrong.
$('a[href*="onepage"]').each(function() {
var href = $(this).prop("href");
// change the property href to new url
$(this).prop("href", href.replace(new RegExp("onepage", "g"), "#"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
You could use plain javascript to change the href property, see following please:
$('a[href*="onepage"]').each(function() {
this.href = this.href.replace(/onepage/, "#");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
$('a[href*="onepage"]').each(function() {
var str = $(this).attr('href').replace(/onepage/, "#");
$(this).attr('href',str);
});
or
$('a[href*="onepage"]').attr( "href", function( i, val ) {
return val.replace(/onepage/, "#");
});

Count the number of displayed elements in a HTML list

I have a list of list items which are display: none by default. I programmatically change a certain number of them to list-items.
I've been trying to use querySelectorAll but when I try:
document.querySelectorAll("#ulname style[display*='list-item']")
it returns an empty array (I know it is at least one).
Ideas on how to modify my selectors or another approach? I would like to know after the fact how many items are displayed.
var liList = document.getElementById("myul").getElementsByTagName("li");
var largo = liList.length
alert(largo);
WHERE "myul" is the id of the list and largo is number of li items
<ul id="myul">
<li>hello</li>
<li>world</li>
</ul>
the alert would be 2
<ul id="myul">
<li>hello</li>
<li>world
<ul>
<li>here we are</li>
<ul>
</li>
</ul>
the alert would be 3
var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
totalLis = liNodes.length;
Adding text to your ul tag
var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);
Adding li tag to your ul tag
var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p>Maybe this answer can help. I improvise for this after a few days of testing. This is what I got. Hope it helps you.</p>
<li class="sidenav-item open active">
<a href="#" class="sidenav-link sidenav-toggle" ></i>
<div class="text-white">Hi, There!
<div class="badge badge-primary" id="ul-me"></div></div>
</a>
<ul class="sidenav-menu" id="ul1">
<li class="sidenav-item active">
<a href="#" class="sidenav-link" >
<div class="text-white" >Home</div>
</a>
</li>
<li class="sidenav-item" id="ul2">
<a href="#" class="sidenav-link" >
<div class="text-white" >Blog</div>
</a>
</li>
<li class="sidenav-item" id="ul3">
<a href="#" class="sidenav-link" >
<div class="text-white" >Downloads</div>
</a>
</li>
<li class="sidenav-item" id="ul4">
<a href="#" class="sidenav-link" >
<div class="text-white" >Contact</div>
</a>
</li>
<li class="sidenav-item" id="ul5">
<a href="#" class="sidenav-link" >
<div class="text-white" >About</div>
</a>
</li>
</ul>
</li>
'''
<!-- Count Item (li) in <ul> -->
<script>
function myFunction() {
var mylist = [document.getElementById("ul1"), ("ul2"), ("ul3"), ("ul4"), ("ul5")];
document.getElementById("ul-me").innerHTML = mylist.length;
}
</script>
</body>
</html>

Categories

Resources