how to assign variable in this jquery code? - javascript

i have a few divs
<div number='one_one' />
<div number='one_two' />
<div number='one_three' />
in jquery variable i have
var session_one = "one_one";
my problem is i cant click programatically the div with that number attribute
here is my trying :
$("div[number=session_one]").click()
but instead of click i have got an Object
Object[]
please help

Concatenate it like bellow
$("div[number=" + session_one + "]").click()

$("div[number='"+session_one+"']").trigger("click");
You are checking session_one with div number. But there is no div with number session_one. So you have to pass your div number as shown above.

Use: $("div[number=" + session_one + "]").click()
FYI: I wouldn't use the property "number" in a div. Use "id" or at least "data-number" which is html5 valid.

i think its because number is not a valid HTML Attribute use HTML5 data attribute as
<div data-number='one_one' />
<div data-number='one_two' />
<div data-number='one_three' />
then jquery
var session_one = "one_one";
$("div[data-number=" + session_one + "]").click()

The right syntax should be like this:
$("div[number="+session_one"+]").click(function(){
alert("clicked");
});
If you want to trigger it automatically, use this:
$("div[number="+session_one"+]").trigger("click");

Related

How can I replace specific characters in a div?

I would like to change the comma into an apostrophe in this div.
<div id="range" class="range-slider">
<div class="something">15,000.00</div>
</div>
So instead of 15,000.00 I would like to do 15'000.00
I cannot alter the HTML so I think I need to achieve this in JS, right?
Do I need to use the changeText function?
Many thanks in advance.
There is no native changeText function in JavaScript. You can change the text content of an element using textContent property and use replace() method to replace , to '.
let elem = document.querySelector(".something")
elem.textContent = elem.textContent.replace(",", "'");
<div id="range" class="range-slider">
<div class="something">15,000.00</div>
</div>
To add to TechySharnav's answer, you can also query for the classname directly.
var el = documents.getElementByClassNames("something");
el.textContent = el.textContent.replace(',',"'");

How to pass a JavaScript variable to DIV tag?

I am trying a code to pass a javascript variable to the div tag to change its attribute. If anyone knows how to do this, help me.
<div id="rate" class="money" data-wpac-chan=""></div>
I want to pass a javascript variable to the data-wpac-chan.
<script type="text/javascript">
var div = document.getElementById("rate").data-wpac-chan = "bal";
</script>
It is not working.
I want to replace data-wpac-chan=" " to data-wpac-chan="bal"
This should do it:
document.getElementById("rate").setAttribute("data-wpac-chan", "bal");
SetAtrribute will set any attribute on an HTML element.
You can also use dataset to assign the value to the attributes that has data-. Notice that, you need to use the camelcase as attribute name. So, wpac-chan becomes wpacChan
document.getElementById("rate").dataset.wpacChan = 'bal'
<div id="rate" class="money" data-wpac-chan="">sadasd</div>

Replace every <img> tag with itsown custom data attribute

How to replace every occurrence of <img> tag in a html message, with a unicode value stored as a custom attribute.
Sample message:
<img data-uni-val="😃" src="path/to/img1.png" class="emoji"/>hello,
<br /> <img data-uni-val="&#1F604;" src="path/to/img2.png" class="emoji"/>
I need to replace every emoji <img> with its unicode value where it stored as custom attribute.
$('<div />')
.html(chatText).find('img.emoji')
.replaceWith('someval').end().html()
Using above code I can find and replace every img's with a string, but not able to replace with data-uni-val.
I tried:
$('<div />').html(chatText).find('img.emoji')
.replaceWith($(this)
.data('data-uni-val')).end().html()
Is there any simple way to solve this?
The main issue with your code is that the attribute data-uni-val should be accessed using $(this).data('uni-val').
Furthermore, you could just use .replaceWith(fn) to perform the conversion.
$('.emoji').replaceWith(function() {
return $(this).data('uni-val');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-uni-val="😃" src="path/to/img1.png" class="emoji"/>hello,
<br /> <img data-uni-val="😄" src="path/to/img2.png" class="emoji"/>
In jQuery, the .data() function uses a different "name" than the name you use inside the element markup. It's a camelCase without the 'data' and without the hyphens.
Try .data('uniVal')
$('.emoji').each(function(){
var str = $(this).attr('data-uni-val');
$(str).insertAfter($(this));
$(this).remove();
});
$("div img").each(function(){
$(this).removeClass('emoji').addClass($(this).attr('data-uni-val'));
});
See if this is what you want:
jQuery('.emoji').each(function(){
var str = jQuery(this).attr('data-uni-val');
jQuery(this).replaceWith(str);
});

Get value of class of a DIV using JavaScript

Question is simple. Not using jQuery... how do I get the value of class value in a DIV using regular JavaScript?
Thanks.
Assuming this HTML
<div id="Target" class="MyClass" />
Like This
var ElementCssClass = document.getElementById("Target").className;
get a reference to the div and use .className
document.getElementById('someDiv').className

Is it possible to append to a div with a given attribute?

How do you append to a specific div with a specified attribute?
ex.
<div attribute="234"></div>
$('#divwithattribute234').append('test');
jQuery('div[attribute=234]').html('test');
Check on jsfiddle
I strongly recommend reading this post about using custom attributes because that wouldn't be valid even in HTML5 which will allow custom attributes. Why not simply use a class since you can have as many as you want ?
<div class"some_class some_other_class target_class"></div>
Of all the above classes, assuming 'target_class' is the one used for identifying the <div>, you would select it and append to it with
$(".target_class").html('test');
Update:
If you have more than one target <div>s and you're looking for a specific one, use a wildcard selector on the trigger (in our case we'll use the ^= operator which means 'starts with') and then assign its ID to a variable which we then pass to the <div> selector. Say you want to add your text to a div when a link is clicked ...
HTML
Add to DIV 1<br />
Add to DIV 2<br />
Add to DIV 3<br />
<div class="some_other_class target_1">Div 1</div>
<div class="some_other_class target_1">Div 2</div>
<div class="some_other_class target_1">Div 3</div>
jQuery
$("a[id^=target_div_]").click(function(event) {
var targetID = $(this).attr('id').substr(11);
$("div.target_" + targetID).html('content got inserted in div ' + targetID);
event.preventDefault();
});
See it on JSFiddle.
Hope this helps !
This is how you will match your div (<div attribute="234"></div>):
$("div[attribute=234]").html('Lets write something...');

Categories