I want to use jQuery to iterate through a list of <div>s in the following example:
<div id="selectedDefinitionsDiv">
<div id="selectedDef1" class="myclass">
<textarea class="textClass" style="margin-left:5px;width:600px;height:80px;">an adoptive country</textarea>
<input type="button" onclick="removeSelectedDefinition(1)" value="Delete">
</div>
<div id="selectedDef2" class="myclass">
<textarea class="textClass" style="margin-left:5px;width:600px;height:80px;">my adopted state</textarea>
<input type="button" onclick="removeSelectedDefinition(2)" value="Delete">
</div>
</div>
I want to pull out the data in each of the textareas. In the above example that would be an adoptive country and my adopted state
I have tried
$(#selectedDefinitionsDiv).children('myclass').each(function(i) {
var val = $(this).children('textClass').value;
processString( val );
});
But it doesn't go into the loop at all. Any idea what is wrong with my jQuery?
Quotes missing in selector
Change
$(#selectedDefinitionsDiv)
to
$("#selectedDefinitionsDiv")
Also change value to val() and add . before class name in selector
$("#selectedDefinitionsDiv").children('.myclass').each(function(i) {
var val = $(this).children('.textClass').val();
processString( val );
});
On more thing closing > of first div
Live Demo on jsBin
Live Demo on jsFiddle
You need quotes: $("#selectedDefinitionsDiv")
Instead value, you need to use val()
With your existing code you will probably be getting a JavaScript error since the syntax is illegal. This explains why the code is not executing. The illegal syntax is that
$(#selectedDefinitionsDiv)
is missing the surrounding quotes like so $('#selectedDefinitionsDiv').
However, whilst that fixes the syntax error, there are further problems with the selectors.
The CSS class selector in the second and third selectors children('myclass') and .children('textClass') is missing the leading . - it should be .myclass and .textClass and you need to use jQuery's .val() instead of the plain JavaScript .value since the object you are calling .value on is a jQuery object.
A simpler solution would be to just supply a more specific selector:
$('#selectedDefinitionsDiv .textClass').each(function(i) {
var val = $(this).val();
processString(val);
});
Just looks to need a bit of tidy up - myclass needs to be prefixed with a . and the id need to be in quotes.
children('.textClass') also needs a . prefix:
$("#selectedDefinitionsDiv").children(".myclass").each(function(i)
{
var val = $(this).children('.textClass').val();
processString( val );
});
Try this:
$('textarea').each(function(i) {
var val = $(this).val();
processString( val );
});
Hope this helps.
Related
I cannot manage to change the inner html of a div element
<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>
I've tried the following:
$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"
but none of them is working
$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work
as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work
$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"
In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.
$(".emoji-wysiwyg-editor").html("Hello!");
$(".emoji-wysiwyg-editor .form-control").html("Hello!");
And you want to add html contents in DIV so you have to use html. val is use for input typt.
in pure JavaScript with the use of multiple class.
document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";
Using JS,
var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";
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="F604;" 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);
});
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");
I am not sure how to select the input below using Javascript selectors. I tried this but that doesn't seem to be correct:
$("input:text[name=[11235]");
<div class="Row-LineDetail A" id="Row1235">
<span class="Col-Label LineIndent1">
</span>
<span class="Col-Dollar">
<input type="text" name="l1235" value="$5,000.00" cols="8" onkeyup="validateNegAmount(this);" onblur="transform(this)" onfocus="removeFormatters(this);this.select();">
</span>
</div>
$('input[name="l1235"]')
That would work if you are using jQuery, as in your example above.
You'll want something like this:
$("input[name='11235']");
Take a look at http://api.jquery.com/category/selectors/attribute-selectors/ for more information about attribute selectors.
Since you appear to be using jQuery the following would work:
$("input[name='l1235']")
with using jquery
$('input[name="l1235"]')
with pure javascript
document.getElementsByName('l1235')
For you
Simply use
$('input[name=l1235]');
Other method
If you want to select the text elements, then you can ues
$('input[type=text]');
Other queries can be executed after this such as:
if($(this).attr('name') == 'l1235') {
And so on! :)
How do I get jQuery to return the entire
<div class="loan_officer_apply_now_link">APPLY NOW!</div>
Currently it only returns the contain "a" element
APPLY NOW!
Test Code
$('a').click(function(){
alert($('.loan_officer_apply_now_link').html());
})
http://jsfiddle.net/gUd9J/1/
Use the native JS .outerHTML property instead of just the jQuery .html() function. It will make you life a lot easier, instead of trying to do fancy jQuery wraps. You can do this with the following:
$(selector)[0].outerHTML // This is your HTML code
You can also use the element's outerHTML property
$('a').click(function(){
alert($('.loan_officer_apply_now_link').get(0).outerHTML);
})
Demo: Fiddle
jQuery doesn't have a built-in function for this.. here's one solution:
http://jsfiddle.net/TvWLL/
$('a').click(function(){
alert($('.loan_officer_apply_now_link').clone().wrap('<div>').parent().html());
})
give a wrapper class to it
Click Me<br /><br />
<div class="container">
<div class="loan_officer_apply_now_link">APPLY NOW!</div>
</div>
$('a').click(function(){
alert($('.container').html());
})
Working fiddle
It appears you want the parents html:
$(this).parent()[0].outerHTML