Given script find text from .label (text1 or any text), then it add class class="text1" to parent list <li> like this: <li class="text1">
Jquery:
$('.label a').each(function() {
$(this).closest('li').addClass($(this).text());
});
HTML:
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li> <!--List 1-->
<span class="meta">
<div class="label">
text1 <!--This text-->
</div>
</span>
</li>
<li> <!--List 2-->
<span class="meta">
<div class="label">
text2 <!--This text-->
</div>
</span>
</li>
</ul>
</div>
By this Script we get Result:
<ul>
<li class="text1"> <!--Got New class to List 1-->
<span class="meta">
<div class="label">
text1
</div>
</span>
</li>
<li class="text2"> <!--Got New class List 2-->
<span class="meta">
<div class="label">
text2
</div>
</span>
</li>
</ul>
Please See Example Fiddle >
Now following my question i'm trying to replace Class and Text to Buttons, there have two buttons like <button class="one"></button> and <button class="two"></button>, now want to place class/text .text1 (or any class) inside button,
like: <button class="one text1">text1</li></button> and <button class="two text2">text2</li></button> by same jquery given above.
I have tried this Replace text script, but i'm unable to do that. Any suggestion for other way to do this?
Thanks in advance.
Not sure exactly what you are going for but you could try something like this.
<html>
<body>
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul id="main-list">
<li>
<span class="meta">
<div class="label">
text1
</div>
</span>
</li>
<li>
<span class="meta">
<div class="label">
text2
</div>
</span>
</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var btns = ['.one', '.two'];
$('#main-list li').each(function(k,el){
// use clone if you don't want to remove original dom element
var $li = $(el).clone();
var className = $li.find('a').text();
$li.addClass(className)
.empty()
.text(className);
var $btn = $(btns[k]);
$btn.append($li);
});
});
</script>
</body>
</html>
Related
So I want to select the "href" attribute from all the element that are in a list. So in my case I want to get link from the a element.
So I've trief 2 diffrent each loops.
Html and JS Example:
<ul id="product_list">
<li>
<div class="class1">
<div class="class2>
<div class="class3">
<span class="productPic"></span>
<a class="link" href="www.THISLINK.com"></a>
</div>
<div class="title"></div>
<div class="logos"></div>
</div>
</div>
</li>
<li>
<div class="class1">
<div class="class2>
<div class="class3">
<span class="productPic"></span>
<a class="link" href="www.THISLINK.com"></a>
</div>
<div class="title"></div>
<div class="logos"></div>
</div>
</div>
</li>
<li>
<div class="class1">
<div class="class2>
<div class="class3">
<span class="productPic"></span>
<a class="link" href="www.THISLINK.com"></a>
</div>
<div class="title"></div>
<div class="logos"></div>
</div>
</div>
</li>
</ul>
let $ = cheerio.load(resp);
$('#product_list > li').each((index,element) => {
console.log($this).children('.link').attr('href');
}
$('.link').each((index,element) => {
console.log($this).attr('href')
}
I'm only getting 'undefined' as result.
$('#product_list .link').each(function(index, el){console.log($(el).attr('href'))})
First of all, it is called $(this) and not $this.
This change will at least give you all the results you want. If you now just want the results that actually contain information, you should either use the second each loop or you can use $('[href]').
With map and es6 you would do:
const hrefs = $('#product_list > li .link').map((i, el) => el.attr('href')).get()
Note the get() at the end which turns it into a js array
I have this JS fiddle:
https://jsfiddle.net/zczwjdrw/7/
Menu 1:
When clicking on AAA it opens a menu.
When clicking on BBB it opens an other menu and removes AAAs style back to default. When clicking on BBB again it closes the submenu but doesn't change back to default. How do I solve this?
Menu 2:
When clicking on a sub menu option - it colors it. when clicking on an other option - it doesn't remove the class from the previous element. and you can continue coloring all submenu options. What can be the solution for this? I have used the same functionality on jQuery as .sidebar1.
jQuery:
$('.sidebar1 a').click(function(){
$(this).addClass('active-sb1').siblings().removeClass('active-sb1');
});
$('.sidebar2 a').click(function(){
$(this).addClass('active-sb2').siblings().removeClass('active-sb2');
});
HTML:
<div class="main-wrapper">
<div class="sidebar1">
<a href="ssb1" class="category" id="sb1" onclick="return false">
<div>AAA</div>
</a>
<a href="ssb2" class="category" id="sb2" onclick="return false">
<div>BBB</div>
</a>
<a href="ssb3" class="category" id="sb3" onclick="return false">
<div>CCC</div>
</a>
</div>
<div class="sidebar2" id="ssb1" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
AAAAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
<li>
AAAAAAAAAAA
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb2" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
<li>
BBBBBBBBBB
</li>
</ul>
</div>
</div>
<div class="sidebar2" id="ssb3" style="display: none;">
<div class="sb2-content">
<h3>Choose Something:</h3>
</div>
<div class="sb2-menu">
<ul>
<li>
CCCCCCCCC
</li>
<li>
CCCCCCCC
</li>
<li>
CCCCCCCC
</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="user-bar">
</div>
<div class="content">
</div>
</div>
</div>
In .sidebar2 your <a> elements are inside a <li> so the <a> has no other siblings. But instead the parent <li> has siblings.
So, you could try something like this:
$('.sidebar2 a').click(function() {
var e = $(this);
e.addClass('active-sb2');
e.parent().siblings().children().removeClass('active-sb2');
});
And for your first problem, you could test if the element already has the class active-sb1, which means that the element is open, in which case you remove the class.
$('.sidebar1 > a').click(function() {
var e = $(this);
if (e.hasClass("active-sb1")) {
e.removeClass('active-sb1');
} else {
e.addClass('active-sb1');
}
e.siblings().removeClass('active-sb1');
});
Updated Fiddle link
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
I try to put in place a system popup, why I decided to use the data attribute.
I wish that when an element has the id "popup" I recovered using the jQuery data-item value.
The data-item value has the id to display in my popup, my problem is that if I have several id popup, recovered came only 1 single id, the first in this page.
How can I do to retrieve all the popup and display ID is the corresponding value with the data-item?
<div id="boxpop">
<div class="centered">
<span></span>
<div class="close-btn"></div>
</div>
</div>
<div id="login" style="display:none;">
Test div
</div>
<header>
<div id="MainHeader">
<div class="logo"></div>
<nav id="Menu">
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
</nav>
</div>
</header>
<script type="text/javascript">
$("#popup").click(function() {
a = $("#popup").data("item");
alert(a);
});
function demo(div) {
$("#boxpop").fadeIn(500);
$("#boxpop .centered span").empty();
$(div).insertAfter("#boxpop .centered span").fadeIn(100);
}
</script>
ID must be unique.
You should use class for this, this is the correct way:
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
And then...
$(".popup").click(function() {
a = $(this).data("item");
alert(a);
});
Hope it helps.
The is is because cannot have multiple elements with the same id attribute in the same document - it's invalid HTML. You should use classes instead. From there you can use the this keyword in the click handler to reference the element which raised the event and read the data attribute. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxpop">
<div class="centered">
<span></span>
<div class="close-btn"></div>
</div>
</div>
<div id="login" style="display:none;">
Test div
</div>
<header>
<div id="MainHeader">
<div class="logo"></div>
<nav id="Menu">
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
</nav>
</div>
</header>
<script type="text/javascript">
$(".popup").click(function() {
a = $(this).data("item");
alert(a);
});
function demo(div) {
$("#boxpop").fadeIn(500);
$("#boxpop .centered span").empty();
$(div).insertAfter("#boxpop .centered span").fadeIn(100);
}
</script>
I know it is ugly, but I need to find out how to get the attribute of <a> tag, of each <li> that has a <span> with class jqx-checkbox-check-checked, if the <li> contains another set of <ul><li>. Only direct <span> will be check for the desired class(jqx-checkbox-check-checked)
This is the code sample:
<li>
<span></span>
<div>
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqxtree item">
<b style="color:black"> item1</b>
</span>
<ul class="jqx-tree-dropdown" >
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class="chkbox jqx-checkbox">
<div>
<div class="jqx-checkbox-default jqx-rc-all">
<span class="jqx-checkbox-check-checked"></span>
</div>
</div>
</div>
<span class="jqx-rc-all jqx-tree-item">
item2
</span>
</li>
<li >
<span class="jqx-tree-item-arrow-collapse jqx-disableselect"></span>
<div class=""><div>
<div class="jqx-checkbox-default jqx-rc-all" >
<span class="jqx-checkbox-check-checked"></span>
</div></div></div>
<span class="jqx-rc-all jqx-tree-item">
<b style="color:black"> item3</b>
</span>
</li>
</ul>
</li>
</ul>
</li>
I know it is not simple! but if someone can show me the right jquery approach, I will be more then grateful
I dont fully understand your question - but I think you need to have a read of the following jQuery methods :
closest()
next()
find()
Using a combination of those you might be able to get a handle on the object you need
Done it :
$('.jqx-checkbox-check-checked').each(function(){
alert($(this).parent().parent().parent().next().find('a')
.attr('href'));
});
Working example : http://jsfiddle.net/manseuk/CEYXc/
Your HTML is all over the place ...