This is the jQuery:
<script type="text/javascript">
$(document).ready(function(){
var relName;
$('.child').each(function() {
relName = $(this).attr('rel');
relName.replace('&','');
$(this).attr('rel', relName);
$(this).appendTo('#' + $(this).attr('rel'));
});
});
</script>
With this relevant HTML:
<div rel="MadDogs&EnglishmenHandpaintedfigurines" id="Figurines" class="category section child">
<h3 class="categoryTitle">Figurines</h3>
</div>
But for some reason, the replace has no effect whatsoever!
replace returns string with replaced data. So you need to assign back to your variable.
relName = relName.replace('&','');
replace() doesn't change the original string, it returns a new one.
It's not updating because you're not assigning the result to anything.
Try this instead:
$(this).attr('rel', relName.replace('&',''));
Here's a neat way to write it, using the callback version of attr basically every jQuery method:
$(document).ready(function() {
$('.child').attr('rel', function(i, relName) {
$(this).appendTo('#' + relName);
return relName.replace('&','');
});
});
Related
I want to change sub element of below data attribute
<div class="blue-shape"
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>
for this i have added below jquery code but it doesn't work
$(document).ready(function(){
jQuery('.blue-shape').attr("data-actions",{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''});
});
.blue-shape is div class name where i want to change data attribute
You can pass a function as a second arguement and you can iterate over to change any value like:
jQuery(document).ready(function($) {
console.log($('.blue-shape').data('actions'));
$('.blue-shape').attr("data-actions", function() {
var arr = $(this).data('actions'), newArr = [];
$.each(arr, function(i, obj){
if(obj.slide === "rs-18"){
obj.slide = "rs-16"
}
if(i === arr.length-1){ newArr.push(obj); }
});
return newArr;
});
console.log($('.blue-shape').data('actions'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'></div>
jQuery.attr() expects second parameter to be string.
have a look at jQuery.data() also
$('document').ready(function() {
jQuery('.blue-shape')
.attr("data-actions", "{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue-shape" data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>DATA</div>
You need to pass string in 2nd param or you can simply use data() method too like:
console.log($('.blue-shape').data("actions"));
$('.blue-shape').data("actions","[{event:'mouseenter', action:'jumptoslide', slide:'rs-16',delay:''}]");
console.log($('.blue-shape').data("actions"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="blue-shape"
data-actions='[{"event":"mouseenter","action":"jumptoslide","slide":"rs-18","delay":""}]'>
I just updated your jquery with this following code please check and vote if it works
$('document').ready(function(){
jQuery('.blue-shape').attr("data-actions","[{'event':'mouseenter', 'action':'jumptoslide', 'slide':'rs-16','delay':''}]");
});
For Reference
https://jsfiddle.net/jasonantho/6ehmded3/
I have this code
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>
<script>
$(document).ready(function() {
var visible_elem_height = $('div').is(':visible').height()
alert( visible_elem_height )
});
</script>
but my code Doesn't work , So what do u suggest ?
.is() return a boolean value so your script will fail, instead you need
$(document).ready(function () {
var visible_elem_height = $('div:visible').height();
//or var visible_elem_height = $('div').filter(':visible').height()
alert(visible_elem_height)
})
$('div').is(':visible') returns true/false depending on the visibility of your element. On the other hand, .height() function is applied on the element and NOT on the boolean output. Therefore, $('div').is(':visible').height() will simply not work.
To achieve the desired behaviour, use the :visible selector $('div:visible').height()
$(document).ready(function() {
var visible_elem_height = $('div:visible').height()
alert( visible_elem_height )
});
plunkr
Try utilizing .filter()
$(document).ready(function() {
var div = $("div").filter(function(i, el) {
return $(el).is(":visible")
});
if (div.length > 0) {
alert(div.height())
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:500px;display:none"></div>
<div style="height:1000px;"></div>
The statement is(':visible') returns true or false as output. If you want to get the height of the element, you can directly get it using the .height() method.
I was trying to add text into field with id #shouttext, but i need to trim value from onclick event which is just after (' and also delete ') symbols.
So if i have
<img src="images/smilies/at.png" alt="" title="" class="smilie smilie_9 smilie_pointer" onclick="MyBBEditor.insertText(':at:');">
I want to get
:at:
and add it to input with #shouttext id. Below is my code, which doesn't work - and i think its blocked by defined onclick value, which i was trying to remove.
<script type="text/javascript">
$( document ).ready(function() {
$('.smilie').click(function()
{
var s1,s1;
s1=attr("onclick");
s1=s1.replace('MyBBEditor.insertText(\'', '');
s2=s1.replace('\')', '');
$('.smilie').attr('onclick','').unbind('click')
$('#shouttext').val($('#shouttext').val()+s2);
})
});
</script>
Thanks for any help in advance!
you could try also:
var str = $(".smilie").attr("onclick").split("'")[1];
to get the :at: try it here: fiddle
now you can use it here:
$('.smilie').unbind("click");
$('.smilie').click(function() {
var str = $(".smilie").attr("onclick").split("'")[1];
$('#shouttext').val($('#shouttext').val() + "" + str);
});
or how #eg_dac says, you can override the click event with $.on()
instead of unbinding it in the click, you can do
$(".smilie").attr("onclick", ""); // clear the already declared attribute.
$(".smilie").on("click", function(){
$('#shouttext').val($('#shouttext').val()+s2);
});
Example found here http://jsfiddle.net/meougz1L/
$("img").attr("onclick","");
$("img").on("click", function(){
alert("click event overridden");
});
When I click on #upvote the #vote increases by 1 and when #downvote is clicked it decreases by 1. But when the vote value is "-1" and if the upvote is clicked the vote value becomes "1" and not "0".
<script type="application/javascript">
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').val();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').val();
$('#vote').text(VoteValue1-1);
});
});
</script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Any idea to what might be wrong.
Try parseInt()
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').text();
$('#vote').text(parseInt(VoteValue)+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').text();
$('#vote').text(parseInt(VoteValue1)-1);
});
});
Working DEMO
Note: .text() should use for getting value of DIV instead of val()
First, you should use html() or text() instead of val(), val() is for inputs or textarea.
Then, you should use parseInt, to make sure you manipulate the right types : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
If that doesn't solve it, then create a jsfiddle so that we can reproduce the problem.
Last, beware of duplicate ids if you have multiple voting systems on the same page.
Use .text() instead of .val(), and use + to parse the string into a numeric.
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = +$('#vote').text();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = +$('#vote').text();
$('#vote').text(VoteValue1-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Solution:
Firstly, $('#vote').val() should be $('#vote').text() . Now these values will be of string type. Parse them to int first to work them correct . Because then it would only append the digits rather incrementing or decrementing .
$(document).ready(function () {
$('#upvote').click(function () {
var VoteValue = parseInt($('#vote').text());
$('#vote').text(VoteValue + 1);
});
$('#downvote').click(function () {
var VoteValue1 = parseInt($('#vote').text());
$('#vote').text(VoteValue1 - 1);
});
});
In an HTML document, .html() can be used to get the contents of any element. .val() used for input box. http://api.jquery.com/html/
var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();
is there anyway to get the class when click event is fired. My code as below, it only work for id but not class.
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id + " and " + event.target.class);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
click me 1
click me 2
</body>
</html>
jsfiddle code here
Try:
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id+" and "+$(event.target).attr('class'));
});
});
This will contain the full class (which may be multiple space separated classes, if the element has more than one class). In your code it will contain either "konbo" or "kinta":
event.target.className
You can use jQuery to check for classes by name:
$(event.target).hasClass('konbo');
and to add or remove them with addClass and removeClass.
You will get all the class in below array
event.target.classList
A variant on Vishesh answer, which instead returns a Boolean:
event.target.classList.contains(className)
$(document).ready(function() {
$("a").click(function(event) {
var myClass = $(this).attr("class");
var myId = $(this).attr('id');
alert(myClass + " " + myId);
});
})
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
click me 1
click me 2
</body>
</html>
This works for me. There is no event.target.class function in jQuery.
If you are using jQuery 1.7:
alert($(this).prop("class"));
or:
alert($(event.target).prop("class"));
Careful as target might not work with all browsers, it works well with Chrome, but I reckon Firefox (or IE/Edge, can't remember) is a bit different and uses srcElement. I usually do something like
var t = ev.srcElement || ev.target;
thus leading to
$(document).ready(function() {
$("a").click(function(ev) {
// get target depending on what API's in use
var t = ev.srcElement || ev.target;
alert(t.id+" and "+$(t).attr('class'));
});
});
Thx for the nice answers!
$(e.target).hasClass('active')