I am trying to iterate through all the span elements that is the children of a div:
$('#recommendTextArea').children('span').each(function () {
console.log(this.html());
});
However I always get this error:
Uncaught TypeError: Object #<HTMLSpanElement> has no method 'html'
I tried changing it to text(), but it also doesn't work
Try with this :
console.log($(this).html());
You were trying to call .html() on DOM element, not a jQuery object.
$('#recommendTextArea').children('span').each(function () {
console.log($(this).text());
});
1) Try $(this).html() or $(this).text()
2) you could use alternatively $('#recommendTextArea').find("span") to get the spans
.html() is a jQuery function and must be called on a jQuery object. You can create a jQuery object from this by passing it to the jQuery object, like $(this)
In your code this is a <span> which does not have any native method called .html(), hence the JavaScript error.
Related
I want JQuery function to return me the value inside the 'data-tabconfig'
<li class="tab-add" data-tabconfig="#{layoutBean.maxTabs}">
I can easily get it if I call onclick function.
$(this).attr('data-tabConfig');
But I don't want to get it on click,I want to get it on bodyload().
I tried with .find() but I couldnt get it working
This was my attempt $('li').find().attr('data-tabConfig');
$(document).ready(function(){
$('li.tab-add').attr('data-tabconfig');
//OR
$('li.tab-add').data('tabconfig');
});
To get the contents of the attribute data-id (like in ) you have to use
$('li.tab-add').attr("data-tabconfig") // will return the string 123
or .data() (if you use newer jQuery >= 1.4.3)
$('li.tab-add').data("tabconfig") // will return the string 123
Use has attribute selector to get the element with a particular attribute. Although wrap it within document ready handler to run after elements are loaded.
$(document).ready(function(){
var val = $('li[data-tabConfig]').attr('data-tabConfig');
// do the rest
});
Try this
$(document).ready(function(){
$('.tab-add').attr('data-tabConfig');
});
Fiddle Here
If you want to get with your own attempt:
$(document).ready(function(){
var x = $('body').find('li.tab-add:first').attr('data-tabConfig');
});
I am trying to append child via jQuery to the on of selected HTML element.
My code:
var table = $(this).parent();
console.log(table)
table.appendChild(table_row);
Console:
[table.table.unit-list, prevObject: jQuery.fn.init[1], context: tr] //log
... appendChild is not a function //error
Just use .append()
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.
table.append(table_row);
Read about Difference between append and appendChild
You are trying to use pure JavaScript function appendChild with jQuery object.
To append your table use jQuery append table.append(table_row);
OR you can access to pure JavaScript object by getting very first element from jQuery table[0]. So it will be like table[0].appendChild(table_row);
Since jquery $ function returns "Array" (actually it returns iterate-able object)
you can use
table[0].appendChild(tableRow)
if you want to use appendChild .
I have a method in jQuery which is receiving a 'this' reference, so that I can filter out all the html by using:
showSomeThing = function (e) {
$("#div").html($(e).html());
}
I want to do some filtering on this e before passing that to the div, e.g. I want to find a class named 'someclass' and set it's display to 'none' so that the class will not show in div above.
I'm trying this:
$("#div").html($(e).find("someclass").hide().html();
but it doesn't work.
I also want to search some particular attributes in the html and their values (once I am able to do the above).
Any ideas?
Try using .end() , .attr()
$("#div").html(
$(e).find("someclass").hide()
.attr({name:"newName", value:"newValue"})
.end()
.html()
);
I wanted to put an id in my element's parent element. Below is my code:
<div>
<div id="child"></div>
<div>
Im aware that jquery has a way to select a parent element , but I dont know how what method shall I use to put an id to it. Below is my jquery code:
div_resizable = $( "#child" ).parent();
div_resizable.id = "div_resizable";
Above code doesnt work with me. It doesnt throw an error, but no changes had taken effect. Any solution to my problem?
For achieve what you want, you can use the jquery attr:
$("#child" ).parent().attr('id', 'newID');
Or you can use the prop:
$("#child" ).parent().prop('id', 'newID');
And you can check the difference between the two here: difference between prop() and attr()
Of course div_resizable.id = "div_resizable" doesn't work. div_resizeable is an jQuery array and you are trying to assign id to it.
Try .attr instead:
$("#child").parent().attr({id: "div_resizable"});
To set a property on the first element inside a jQuery result object:
div_resizable = $( "#child" ).parent()[0];
// ^^^
div_resizable.id = "div_resizable";
This picks the first Element from the result so that you can directly access the property.
Or:
$('#child').parent().prop('id', 'div_resizable');
Use the .prop() helper method to accomplish the same thing.
What I'm trying to do is, to change i's class (which located inside button) on click
<button><i class="fa fa-square-o"></i></button>
Using js code like below (inside on click function):
...
$(this).child("i.fa").removeClass("fa-square-o");
...
getting child is not a function error
What am I doing wrong?
Yes, really there is no child() method in jQuery.
You may use find() or children() for that.
$(this).children("i.fa").removeClass("fa-square-o");
You could use find() instead.
$('button').click(function() {
$(this).find("i.fa").removeClass("fa-square-o");
});
Fiddle
child is not a function.
try this function:
$(this).children("i.fa").removeClass("fa-square-o");
jQuery accepts a second argument as context:
$('button').click(function() {
$('i.fa', this).removeClass('fa-square-o');
});
You are looking for jQuery .children() function. If you are trying to call that function from onclick attribute, you have to remember to pass reference to object by using "this" word.
<button onclick="removeClass(this)"><i class="fa fa-square-o">test</i></button>
removeClass = function(obj){
$(obj).children("i.fa").removeClass("fa-square-o");
}
Working fiddle:
http://jsfiddle.net/4wvgvzL9/