I'm doing a simple class selection like this:
var myItem = $("#div-id h3.class-name");
this selection used to return just one item, but I added some code that may add more elements which has such class name. I would like to put in the variable the value of the only item (if there's one) or of the last (if it has many).
I've tried this but I get an error which says that length() is not a function.
var myItem = $("#div-id h3.class-name");
if (myItem.length() > 0){
myItem = myItem.last();
console.log("it has multiple items");
}
Can you help me understand how to achieve this?
Thank you!
I think it can help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test:last").toggle();
});
});
</script>
</head>
<body>
<h2 id="test">This is a heading</h2>
<p id="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Related
I want to block all actions to be triggered on a particular element and all its child too. I tried code below, in which I have a button and one div having a p tag with default text. So on button click i disable the the div. And want to block all actions to be performed on element which is disable and its child too. But i have modify function which modify text. event after disabling div if pass we any of its child element it get affected I don't want it to be affected.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
function modify(ele){
ele.html("modified");
};
function clickHandler(){
$('#div *').attr('disabled', true);
modify($("p"));
}
</script>
<button onclick = clickHandler()>Show</button>
<div id="div">
<p>default</p>
</div>
</body>
</html>
You need to check for disabled attribute and prevent the operation.
\
function modify(ele){
var containerDiv = $('#div');
if(!containerDiv.attr('disabled') || !containerDiv[0].contains(ele[0])){
ele.html("modified");
}
};
function clickHandler(){
$('#div').attr('disabled', true);
modify($("p"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button onclick = clickHandler()>Show</button>
<div id="div">
<p>default</p>
</div>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
leads to "ReferenceError: Can't find variable: blub"
What most likely obvious thing am I missing?
Try this :
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
Instead of using :
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
In your code you are calling a function(callback) without declaring it. this is not correct way to declaration a function.
JavaScript Functions
According your code you don't need to do any thing on document ready because your function trigger when anyone click on anchor Link. And the second thing is your code is not correct see this one $("#content").attr("data-x") Here you trying to get the data-x attribute of content div, but your div does not contains that attribute use this $("a").attr("data-x"):
Try the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub() //-- It's declarition of an function
{
var x = $("a").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
Working Example
try this:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
The reason you're getting the error is because it can't find the value .attr("data-x"); on the tag <div id="content">. It simply doesn't exist there. If you're looking to append the data-x="12" as a value inside the <div> tag, you could do something like this:
<html>
<body>
<div id="content">
Link
<br/>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$('a[data-role="appender"]').click(function (e) {
e.preventDefault();
var x = $(this).data('x');
$('#content').append(x);
});
});
</script>
</html>
The code above attaches the code to the .click function in jQuery and is wired up using the $('a[data-role="appender"]') which makes your mark up a little bit cleaner. Hope this helps out ! The working solution can be found here: http://jsfiddle.net/TrV8z/
The function blub is local to your script because your passed it as an argument to the jQuery object by wrapping your code with $(...);. Your function is executed when the DOM finishes loading, but in a local scope, which you cannot access from an event attribute. The best way to solve your problem would be not to use an event attribute. Moreover, the div #element doesn't have a "data-x" attribute. Its child a element has one. Try this:
$(function() {
$("#targetlink").click(function(e) {
e.preventDefault();
var x = $("#targetlink").attr("data-x");
$("#targetlink").append(x);
})
});
another quesion: http://jsfiddle.net/ajinkyax/qGzTY/1/
Above link shows a js calculator, but whn u click nothign happens
Im just amazed why this simple function not working!!!.
I even tested with a tag, still it wont wokr. getElementsByTagName("a")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>documentElement</title>
</head>
<body>
<p>This is 4rth child (3)</p>
<p>This is 4rth child (3)</p>
<p>This is 5th child (4) <span id="some">CHANGE THIS</span></p>
<script type="text/javascript">
var mySpan = document.getElementsByTagName('span');
mySpan.innerHTML = 'This is should change';
</script>
</body>
</html>
Do this :
var mySpan = document.getElementsByTagName('span')[0];
mySpan.innerHTML = 'This is should change';
getElementsByTagName doesn't return an element but a collection of all elements having this tag name. If you want only the first one, add [0].
As was pointed by user1689607, if you want to change just this specific span, you'd better do
var mySpan = document.getElementById('some');
Here is source code of the simple page:
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerText = 'Changed';
alert(vText.innerHTML);
$('divText').text = 'Changed with jQuery';
alert(vText.innerHTML);
</script>
</body>
</html>
"jquery-1.4.2.js" file is in the same folder.
Both alerts display "original" text, text in browser also "Original"...
What is wrong with my code? Any thoughts are welcome.
1. A quick google ( took me 2 seconds ) reveals text is a function, not a property. Use it like .text('lol') as the example directly from the API.
http://api.jquery.com/text/
2. innerText isn't available in every browser/DOM property.
As you pointed out in the title you'll be wanting to change the inner html. You'll also need the $('#divText') selector to get to the div with jQuery.
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
alert($('#divText'));
$('#divText').html('Changed with jQuery');
alert(vText.innerHTML);
</script>
</body>
</html>
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>