I am trying to find all elements with an onclick attribute and append ";toggle()"
var originalAttribute = $('[onclick]').attr('onclick');
$('[onclick]').attr('onclick', originalAttribute + ';toggle()');
There is something obviously wrong, but what?
$('[onclick]').attr('onclick'); will return the value for the first matching element.
You need to do this for each element. Try this:
$('[onclick]').each(function() {
var $this = $(this);
var originalAttribute = $this.attr('onclick');
$this.attr('onclick', originalAttribute + ';toggle()');
});
Here's a fiddle.
I think you are looking for something like this:
EDIT:
$('[onclick!=""]').each(function(){
$(this).attr('onclick', $(this).attr('onclick') + ';toggle()');
});
Related
I need to create a function that will add an attribute to elements that have an attribute with specific values.
$index have values 0-10, Code is working to this point: var element = $("a[data-slide-index*='"i"']");
Firebug gives me:
Blockquote
SyntaxError: missing ) after argument list
Rest looks like that:
<script type="text/javascript">
jQuery(document).ready(function($){
for(var i=0; i<parseInt(<?php echo json_encode($index); ?>);i++){
var hoverAtt = "onHover"+i+"()";
var element = $("a[data-slide-index*='"+ i +"']");
element.next().attr("onmouseover", function(){
return hoverAtt;
});
}
})
</script>
There is jFidle example for $index=6:
http://jsfiddle.net/Fuh9P/
Edit: I changed concatenation as Sjoerd suggested but still doesn't work.
The error message is because you concatenate strings the wrong way. You have this:
var element = $("a[data-slide-index*='"i"']");
Within the $() you try to concatenate three parts, like this:
"a"i"b"
Instead, you should use something like this:
"a" + i + "b"
var element = $("a[data-slide-index*='" + i + "']");
I have some data coming from the server in which I fill A Div in the Html page with.
The way I write the div is as follows:
<div class="BigDiv"><label class = "AttList" Std_Id="' + Std_Id + '">' + Std_Name +'</label></div>
Now, I want the data inside this div.
There are some other labels inside the div so I use this.children to access this label.
var labels = $(this).children('div');
var StdName = this.children[0].childNodes[0].nodeValue;
I want to access the Std_Id inside the Std_Id attribute, but I don't know how to do it ... Do you have any ideas?
Thanks.
Assuming that $(this) is a reference to the .BigDiv element:
var StdName = $(this).find('label').attr('Std_Id');
Or, similarly, and with the assumption that this is the .BigDiv element:
var children = this.childNodes;
for (var i=0,len=children.length; i<len; i++){
if (children[i].nodeType == 1 && children[i].tagName.toLowerCase() == 'label'){
var StdName = this.getAttribute('Std_Id');
}
}
References:
jQuery:
attr().
find().
JavaScript
element.getAttribute().
node.nodeType.
tagName.
toLowerCase().
Use getAttribute:
var labels = $(this).children('div');
var StdId = this.children[0].getAttribute("Std_Id");
Note that, according to the HTML5 spec, custom attributes should start with data-, though most browsers can tolerate it.
To save elements, which were selected using a jQuery-Selector, do this:
$labels = $('.BigDiv').find('label');
Now you can loop through each label with jQuery's foreach loop:
$.each($labels, function() {
var std_id = $(this).attr('Std_Id');
// do something with std_id
});
You could use the attr method as such,
var value = $('.AttList').attr('Std_Id');
EDIT
OK, so you for your implementation, you need to do this...
var value = $(this).find('.AttList').attr('Std_Id');
Assuming that this is the div or the parent of that div
I was wondering how to obtain the text inside a given div, with also the input's values as text.
<div id="example">This is a <input type="text" value="right"/> test.</div>
If I just try to get text like this with jQuery :
$("#example").text();
The result would be This is a test. and I'd want : This is a right test.
The number of input would be unknow. As well as the order of the elements...
EDIT :
I finally resolved my own problem :
var finalText="";
$("#example").contents().filter(function() {
if(this.nodeType==3){ finalText =finalText+ this.nodeValue;}
else if(this.nodeName=="INPUT"){ finalText=finalText+this.value;}
return finalText
})
The living example
But #Jonathan Lonowski answer is more clear and simpler than mine !
Here is a quick plugin that will do this for you:
$(document).ready(function() {
$.fn.extend({
getContentText: function() {
var t = '';
this.contents().each(function(i,c) {
var method = $(c).is("input") ? "val" : "text";
t += $(c)[method]();
});
return t;
}
});
alert($("#example").getContentText());
});
Try it out here:
http://jsfiddle.net/wQpHM/
You might try cloning so you can replaceWith the inputs with their values. Then grab the text as you were:
var clone = $('#example').clone();
clone.find(':input').replaceWith(function () {
return $(this).val();
});
alert(clone.text());
You can loop though all children of the <div> and replace then with their values. Something like this:
$.fn.allText = function(){
var $this = this.clone();
$this.children().each(function(){
$(this, $this).replaceWith(this.value);
});
return $this.text();
};
alert($('#example').allText());
Demo: http://jsfiddle.net/4mGmH/
get html and strip html tags
$('#example')[0].innerHTML.replace(/(<([^>]+)>)/ig, '').replace(/(\s+)/g, ' ')
Using innerText
document.getElementbyId('example').innerText;
To get HTML tags:-
document.getElementbyId('example').innerHTML;
Refer this URL element.innerHTML
Here is the code.
function product_analysis_global() {
$(':checkbox:checked').each(function() {
$('#product_' + this.alt).load(this.title);
$('#product_quantity_PRI_' + this.alt).value = this.value;
});
}
All working except the last line that is not working, any ideas. Should return the value of the current checkbox to the appropriate field '#product_quantity_PRI_' + this.alt
Many Thanks.
.value isn't a jQuery object property (it's a DOM object one), it should be .val() like this:
$('#product_quantity_PRI_' + this.alt).val(this.value);
Or (more for illustration), the direct jQuery-less DOM method:
document.getElementById('product_quantity_PRI_' + this.alt).value = this.value;
Use the val() function.
var $this = $(this)
$('#product_quantity_PRI_' + $this.attr('alt')).val($this.val());
How can I wrap every element belonging to a particular class with a link that is built from the text inside the div? What I mean is that I would like to turn:
<foo class="my-class>sometext</foo>
into
<a href="path/sometext" ><foo class="my-class>sometext</foo></a>
Url encoding characters would also be nice, but can be ignored for now if necessary.
EDIT: Just to clarify, the path depends on the text within the element
Use jQuery.wrap() for the simple case:
$(".my-class").wrap("<a href='path/sometext'></a>");
To process text inside:
$(".my-class").each(function() {
var txt = $(this).text();
var link = $("<a></a>").attr("href", "path/" + txt);
$(this).wrap(link[0]);
});
$(".my-class").each(function(){
var thisText = $(this).text();
$(this).wrap("<a></a>").attr("href","path/"+thisText);
});
you can wrap them inside anchor element like this:
$(document).ready(function(){
$(".my-class").each(function(){
var hr="path/"+$(this).text();
$(this).wrap("<a href='"+hr+"'></a>");
});
});
if you are opening links in same page itself then easier way than modifying dom to wrap elements inside anchor is to define css for the elements so that they look like links then handle click event:
$(".my-class").click(function(){
window.location.href="path/"+$(this).text();
});
$("foo.my-class").each(function(){
var foo = $(this);
foo.wrap("<a href='path/" + foo.Text() +"'>");
});
This ought to do it:
$('foo.my-class').each(function() {
var element = $(this);
var text = element.html(); // or .text() or .val()
element.wrap('');
});