JS:
$('.translate').on('click', function(){
$("*").each(function() {
$.each(this.attributes, function() {
if (this.name.indexOf('uloc') == 0) {
$(this).parent().html("HELLOOOOOOOO!");
console.log(this.name + ' has the value: ' + this.value);
}
});
});
});
HTML:
<ul>
<li>Report a problem</li>
<li>Privacy Policy</li>
<li>Terms of Service</li>
</ul>
<ul>
<li><a class="translate" locale="fr">Français</a></li>
<li><a class="translate" locale="en">English</a></li>
</ul>
So on click, the text in the found elements should be replaced with Hello.
How can I accomplish this?
You could a simple attribute selector in the first place:
$('.translate').on('click', function() {
$("[uloc]").html("HELLOOOOOOOO!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Report a problem</li>
<li>Privacy Policy</li>
<li>Terms of Service</li>
</ul>
<ul>
<li><a class="translate" locale="fr">Français</a></li>
<li><a class="translate" locale="en">English</a></li>
</ul>
We don't need to iterate over all elements with attribute uloc. jQuery will do it for us. The simplest solution can be-
$('.translate').on('click', function() {
$("[uloc]").html("HELLOOOOOOOO!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Report a problem</li>
<li>Privacy Policy</li>
<li>Terms of Service</li>
</ul>
<ul>
<li><a class="translate" locale="fr">Français</a></li>
<li><a class="translate" locale="en">English</a></li>
</ul>
The each function has 2 parameters: index and element that you are iterating. You can use that element to modify the html.
https://api.jquery.com/each/
$('.translate').on('click', function(){
$('[uloc]').each(function(index, element) {
$(element).html("HELLOOOOOOOO!");
});
});
The error is simple. When you refer to $(this).parent().html("HELLOOOOOOOO!");, this points to the attribute that you are iterating on. To avoid that, you can keep track of the element from outer loop and use that while accessing the parent element:
$('.translate').on('click', function() {
$("*").each(function() {
// *** Remember the element, to be used later
var element = this;
$.each(this.attributes, function() {
if (this.name.indexOf('uloc') == 0) {
$(element).parent().html("HELLOOOOOOOO!");
console.log(this.name + ' has the value: ' + this.value);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Report a problem</li>
<li>Privacy Policy</li>
<li>Terms of Service</li>
</ul>
<ul>
<li><a class="translate" locale="fr">Français</a></li>
<li><a class="translate " locale="en ">English</a></li>
</ul>
you can use attribute selector of jquery to find all elements having attribute uloc and replace it's text. see below code
$(function(){
$('.translate').on('click', function(){
$("[uloc]").each(function() {
$(this).text("HELLOOOOOOOO!");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Report a problem</li>
<li>Privacy Policy</li>
<li>Terms of Service</li>
</ul>
<ul>
<li><a class="translate" locale="fr">Français</a></li>
<li><a class="translate" locale="en">English</a></li>
</ul>
Related
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/, "#");
});
I have this HTML:
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
I want to select this part:
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
The logic is the content of <h5> tag. I want the one which is specific text. Actually expected result is an array of both that name and that age. Some thing like this: var res = ['Peter', 19];.
But my code selects all those <ul>s:
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
});
How can I fix it?
You can use :contains() to find the H5 that contains the specific string you want. Then use .next() to get that ul associated with the h5
$("h5:contains('specific text')").next('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
console.log(res)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
Jquery script for getting data from ul list :
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
// console.log(res);
});
var htmVal = '';
$('h5').each(function(index){
htmVal = $(this).html();
if(htmVal == 'something else'){
var detail ={name:$(this).next().find('li.name').html(),age:$(this).next().find('li.age').html()};
console.log(detail);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
I have a menu and when I click a button to add a item to another item( to be a submenu) the item/parent doesn't respond to the jQuery code for the parent items.
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").click(function(event) {
event.preventDefault();
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>
Use
$("body").on('click',".test",function(event) {})
try:
$(".test").on('click',function(event) {})
$('.menu li.has-sub>a').on('click', function() {
alert("Working");
});
$(".test").on('click',function(event) {
event.preventDefault();
if($(this).parent().find("ul").length == 0) {
$(this).after("<ul></ul>");
$(this).parent().addClass("has-sub");
}
$(this).parent().find("ul").append("<li><a href='#'>SubItem</a></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Item
</li>
<li class="has-sub">Item
<ul>
<li>SubItem
</li>
</ul>
</li>
</ul>
</div>
I have tried a sample of Vertical menu from CSSmenu site, sample source code working and menu is expanding as per the sample, when i try to add the menu dynamically, those menu's are not expanding even i have verified the final object structure.
Code with dynamic menu:
<body>
<script>
/**
* Comment
*/
function add() {
var list = document.getElementById('list');
var elem=document.createElement('li');
elem.setAttribute('class','last has-sub');
elem.innerHTML="<a href='#'><span>My_Products</span></a>"
+"<ul style='display: none;' >"
+"<li><a href='#'><span>Product 1</span></a></li>"
+"<li><a href='#'><span>Product 2</span></a></li>"
+"<li class='last'><a href='#'><span>Product 3</span></a></li>"
+ "</ul>";
list.appendChild(elem);
}
</script>
<div id='cssmenu'>
<ul id='list'>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li class='last'><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</li>
</ul>
</div>
<input type="button" value="Add Menu" onclick="add()">
</body>
script.js in this "library" has line:
$('#cssmenu > ul > li > a').click(function() {
So dynamically created elements will not be handled with this click handler. You can modify script's line, transforming this handler into delegated event handler:
$('#cssmenu').on('click', '#list > li > a', function() {
See. I have the following html <ul>-<li> lists here.
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who we are?</li>
<li>What we stand for?</li>
</ul>
</li>
<li class="dropdown">
Campaigns<b class="caret"></b>
<ul class="dropdown-menu">
<li>Get Involved</li>
</ul>
</li>
<li>News</li>
<li>Donate</li>
</ul>
Then I have the following jquery code
$("#about-us").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#47F514");
});
$("#campaigns").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#F2720A");
});
$("#news").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#0A76F2");
});
$("#donate").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color","#F7A116");
});
I can see that line $("ul.nav").children("li").children("a").css("background-color", "#0E0E0E") is repeated in many lines. So surely I can take this out and put a new function in each click events to make this same calls this many times.
What should I do to refactor this?
You can do it this way :
var colors_array_by_id = { "about-us" : "#47F514", "campaigns" : "#F2720A", "news" : "#0A76F2", "donate" : "#F7A116" };
$("#about-us, #campaigns, #news, #donate").click(function(){
$("ul.nav > li > a").css("background-color", "#0E0E0E");
$(this).css("background-color", colors_array_by_id[$(this).attr('id')]);
});
The only thing that changes is the color depending of the clicked element. So, I created here an associative array containing id-color couples.
Here's how I would do it -
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who we are?</li>
<li>What we stand for?</li>
</ul>
</li>
<li class="dropdown">
Campaigns<b class="caret"></b>
<ul class="dropdown-menu">
<li>Get Involved</li>
</ul>
</li>
<li><a href="#" id="news" class="navLinks" data-bgcolor="#0A76F2" >News</a></li>
<li><a href="#" id="donate" class="navLinks" data-bgcolor="#F7A116" >Donate</a></li>
</ul>
I've added a data attribute to the links called data-bgcolor which has the color value. Next I attach a single click handler to all the links.
$("#about-us, #campaigns, #news, #donate").click(function(){
$("ul.nav").children("li").children("a").css("background-color", "#0E0E0E");
$(this).css("background-color", $(this).attr("data-bgcolor"));
});
You could do this,
In css,
.myClass{ background-color: #OEOEOE;}
on load,
var elm = $("ul.nav").children("li").children("a");
and then,
$("#about-us, #campaigns, #news, #donate").click(function(){
$this = $(this);
elm.addClass("myClass");
$this.css("background-color", $this.data("bgcolor"));
});
You can use the .data() instead of .attr().