.prev() method not working [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jquery find closest previous sibling with class
The code given below is working perfectly
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>$("p").prev(".selected").css("background", "yellow");</script>
</body>
</html>
But when i move .selected at the top(given below) then it is not working.Can anyone tell me how to make it to work for me and get the .selected element from .prev() method in the second case without manipulating html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="selected">Hello Again</p>//Moved to top
<div><span>Hello</span></div>
<p>And Again</p>
<script>$("p").prev(".selected").css("background", "yellow");</script>
</body>
</html>

You need to use .prevAll() instead of .prev(). The latter only checks the immediate predecessor which is div in your case. prevAll() however checks all prececessors so it will find your element. In case you have multiple predecessors matching your selector, use .prevAll('.selected').first() to get only the nearest one.
Demo: http://jsfiddle.net/ThiefMaster/GnEK5/

You can try
$('p').prevAll('.selected');

Related

Hiding elements in HTML via JQuery, but not working [duplicate]

This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Html script tag - can script be added when src is used [duplicate]
(4 answers)
Closed 11 months ago.
Trying to currently write a function that hides an HTML table element whenever an option is chosen on a dropdown menu. However, trying to test this doesn't seem to yield results.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
$(function () {
$(".testClass").hide();
});
</script>
And the HTML:
<div class="testClass">Test</div>
Close original the script tag used for using src, and open another one for the inline script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(function () {
$(".testClass").hide();
});
</script>
</head>
<body>
<h2>Some heading</h2>
<div class="testClass">Test</div>
</body>
You are not supposed to put anything between the jquery tags.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Then create another script inside the body of your application. Here is an example from w3schools:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The example above shows how to hide an element using jQuery with a click of a button.
However, I am not sure it is the best way to hide an element in Angular. You can do it with an example from here:
Angular 2 Show and Hide an element
Please look at gentiane answer.

How does the event handling in javascript work? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
First I'm sorry, because I'm certain that this has been asked many times, I just don't know how to search for this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<button type="button" onclick="hello()">test1</button>
<button type="button" id="test2">test2</button>
<h1 id='myText'></h1>
<script type="text/javascript">
function hello() {
document.getElementById('myText').innerHTML = 'test1';
}
document.getElementById('test2').onclick = function(event) {
document.getElementById('myText').innerHTML = 'test2';
}
</script>
</form>
</body>
</html>
This is my code. Before this version the whole script-tag was within the head area, and only test1 worked, test2 did nothing.
Can you point me on where to read up on why that is so?
Also, is there a preferred method of the two, to trigger an event?
It's the order in which the elements are processed.
In very simple terms: stuff in <head> loads up before the stuff in <body>, likewise, stuff at the top of <body> will load before stuff at the end of <body>. For this reason, where you're trying to grab an element with an ID of test2, your #test2 event handler will only work when the #test2 button has been loaded before your <script>; otherwise it simply doesn't exist on the page at this point.

document.body.getElementById is not a function

Happy New Year to all. Today, I encountered a very strange thing.
TypeError: document.body.getElementById is not a function
Several times I have checked all the characters, everything must be true
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function addElem()
{
var number=document.body.getElementById("number");
}
</script>
<input type="text" id="number">
<br>
<button onclick="addElem()">Add</button>
</body>
</html>
Why do I get this error?
use document.getElementById() not document.body.getElementById() to achieve the desired effect
That's because document.body is an element. Elements do not have a getElementById() method since ids are unique and using it relative to specific element would be useless.
You cannot have a getElementById() method for the document.body element
Use document.getElementById() instead!

Basic code not working with jQuery [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I am very new to jQuery, literally just trying to get it to work for the first time. Only the alert box works, but none of the other very simple methods I am trying out. Here are the files:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="myJavaScript.js"></script>
</head>
<body>
<h1 id="title">This is a title</h1>
<p> This is some sample text.</p>
</body>
</html>
JavaScript file:
$(document).ready(function (){alert("this works!")});
$("#title").text("but this is not not working");
As you can see the example can't be simpler. I have off course downloaded the jquery-3.1.0.min.js file and put it in the same folder as the html. If I comment out the link, the alert stops working, so I now the file is being referenced OK. Why is the second line of jQuery not working? Many thanks, P
Because the DOM(the entire structure of your application) isn't loaded yet. You need to use a $(document).ready(makes sure the DOM is loaded before running jQuery code) or an event handler to make the change visible.

document.getElementById is not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
document.getElementById() doesn't work? [duplicate]
(7 answers)
Closed 7 years ago.
im new to javascript and want to fill a div with some text. but it doesn't work.
in the documentation this is the common way to do this. but, why doesn't work this for me?
my code is
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
You need to move your script to the end of your HTML. Right now, you're executing the script BEFORE your HTML has been parsed so the document is empty and thus document.getElemntById('mytest') does not find anything.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>
See this other answer for a lot more discussion of this issue and other options if you don't want to move your <script> tag:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
thats because, in your document, the javascript is load at the first, but the div with the id mytest is not loaded at this moment.
you have 2 options to get this working:
first: say javascript to wait until the dom is loaded completly
window.onload=function(){
document.getElementById('mytest').innerHTML="hey";
}
second:
put your script code at the bottom, so the javascript is loaded at least.
but i would prefer the first solution.
best
Try in this way
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
</body>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</html>
Js fiddle

Categories