Removing elements just won't work with jQuery - javascript

I have an autogenerated layout looking like this created by the jQuery.PrettyTextDiff-plugin:
<head>
<script type="text/jaascript" src="the jquery library"></script>
</head>
<body>
<div class="diff">
<span>
<br/>
</span>
Continuing layout...
</div>
<script type="text/javascript" src="diff_match_patch.js"></script>
<script type="text/javascript" src="jquery.pretty-text-diff.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.diff span:first-child').remove(); // As of my last try
});
</script>
</body>
I wish to remove the first span inside the 'diff'-layout in runtime but I can't get it to work. I've tried several solutions found here at SO after a thorough research.
$('.diff').closest('span').remove();
$('.diff span').first().remove(); //recommended solution by the jQuery Foundation - yet it won't work
$('.diff span').remove();
$('.diff').find('span:gt(0)').remove();
Nothing seems to remove the span. How should I do to remove it?

Try like this…
$('.diff').each(function(){
$(this).find('span').eq(0).remove();
});

The statements you have provided should work:
$(".diff").remove("span");
fiddle
I believe that the code you're talking about is generated dynamically. You need to wait until is rendered and remove the span tags after it.
You could also fix the problem in the plugin itself, or ask the author of the library to fix the issue for you.

Did you wrapp your jQuery code like:
$(document).ready(function () {
$('.diff span').remove();
});
this should work.
UPDATE:
To remove only the first child do:
$('.diff span:first-child').remove();
Fiddle

try with this$(".diff").find("span").html("");
Click here.

Somewhere I saw a rapid comment suggesting that I could use CSS to solve this - so I did. It works as a charm.
.diff span {
display: none;
}

Related

Why can't I get .uniqueId() to work with all elements of same class

I have a list of <a class="anchor"></a> elements. Why can't I get uniqueId() to work on them? Here is what I have:
This
This
This
This
$(".anchor").each(function() {
$(this).uniqueId();
});
I have also tried:
this.uniqueId();
Thanks in advance.
Simply use:
$('.anchor').uniqueId();
Demo:
$('.anchor').uniqueId();
$('.anchor').each(function() {
console.log($(this).attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
This
This
This
This
However, your code should lead to the same result. As mentioned in the comments, make sure you have included both jQuery and jQuery UI's libraries.

How do include jQuery in HTML

I'm trying to include jQuery in my HTML-file but I haven't succeed yet.. I know there are a lot of tutorials and stuff on the internet (and this site!) but it still won't work.
This is my code in the HTML-file.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="global.css"/>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<title>test</title>
</head>
<body>
<script>
$(document).ready(function() {
$("p").css("font-size:50px");
};
</script>
<p id="first">Hello there!</p>
</body>
</html>
I just don't understand why nothing is happening..
Would be awesome if someone could help me with this on!
You are not using the jQuery css() function quite properly. You also missed a closing parenthesis. Try changing it to this:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
You should always use .css('property-name', 'property-value') in that format for best results. There are other ways (object properties) but they are slightly different syntax and do not conform directly to expected vanilla CSS property names.
jQuery API reference - .css()
If that does not fix it, check to be sure your jquery file is in the same directory as the HTML page. Or (probably better) just replace it with the CDN call recommended by other answers (e.g. replace <script type="text/javascript" src="jquery-2.0.3.min.js"></script> in your head with <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>).
You missed to close the code properly. You missed the );. Also the css method is little different in your version. The parameters should be property name, property value.
Try this
$(document).ready(function() {
$("p").css("font-size","50px");
});
Working sample : http://jsbin.com/AfAjihiP/1/
There is a small syntax error. Replace:
$(document).ready(function() {
$("p").css("font-size:50px");
};
With this:
$(document).ready(function() {
$("p").css("font-size", "50px");
});
You forgot to close a parenthesis, and the .css() function needs two parameters.
YOu can do one of two things. You can use the cdn version and link it like this:
or
<script type="text/javascript" src="jquery-2.0.3.min.js"></script> after making sure the file is in the root of your project.
also you should have:
<script>
$(document).ready(function() {
$("p").css("font-size", "50px");
});
</script>
and not what you currently have.
Don't write several code: Instead of $(document).ready use $ , it works:
so :
$(function() {
$("p").css({"font-size": "50px"});
});
or
$(function() {
$("p").css("font-size", "50px");
});

Why is this jQuery click function not working?

Code:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
The above code doesn't work. When I click on #clicker, it doesn't alert and and it doesn't hide. I checked the console and I get no errors. I also checked to see if JQuery was loading and indeed it is. So not sure what the issue is. I also did a document ready function with an alert and that worked so not sure what I am doing wrong. Please help. Thanks!
You are supposed to add the javascript code in a $(document).ready(function() {}); block.
i.e.
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
As jQuery documentation states: "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute"
I found the best solution for this problem by using ON with $(document).
$(document).on('click', '#yourid', function() { alert("hello"); });
for id start with see below:
$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });
finally after 1 week I not need to add onclick triger.
I hope this will help many people
Your code may work without document.ready() just be sure that your script is after the #clicker. Checkout this demo: http://jsbin.com/aPAsaZo/1/
The idea in the ready concept. If you sure that your script is the latest thing in your page or it is after the affected element, it will work.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<a href="#" id="clicker" value="Click Me!" >Click Me</a>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
</body>
</html>
Notice:
In the jsbin demo replace http with https there in the code, or use this variant Demo
Try adding $(document).ready(function(){ to the beginning of your script, and then });. Also, does the div have the id in it properly, i.e., as an id, not a class, etc.?
You have to wrap your Javascript-Code with $(document).ready(function(){});Look this JSfiddle.
JS Code:
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
Be sure there is nothing on your button (such a div or a trasparent img) that keeps from clicking the button.
It sounds stupid, but sometimes we think that jQuery is not working and all that stuffs and the problem is on the positioning of DOM elements.
You can use $(function(){ // code }); which is executed when the document is ready to execute the code inside that block.
$(function(){
$('#clicker').click(function(){
alert('hey');
$('.hide_div').hide();
});
});
Just a quick check, if you are using client-side templating engine such as handlebars, your js will load after document.ready, hence there will be no element to bind the event to, therefore either use onclick handler or use it on the body and check for current target
Proper Browser Reload
Just a quick check as well if you keep your js files separately: make sure to reload your resources properly. Browsers will usually cache files, so just assure that i.e. a former typo is corrected in your loaded resources.
See this answer for permanent cache disabling in Chrome/Chromium. Otherwise you can generally force a full reload with Ctrl+F5 or Shift+F5 as mentioned in this answer.

Add a class to first div using jQuery

How to add a class to first div using jQuery.
I Tried following code but doesn't work for me.
maybe I'm missing something.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>
Edit: Thanks to everyone, is there anyway to add a class to rest of DIVs?
You are executing the code before the markup is ready. Wrap the code in
// document ready short-style
$(function() {
});
try
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
Your code is correct, but it's executed before the DOM is ready, please move the <script></script> to the last line before </body>.
To add a class to the rest of the elements you can do this (from VisioN's comment)
$(".item:not(:first,:last)").addClass("differentClass");
$(".item :first").addClass('first');
u use this code
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
your code should execute when the DOM is fully loaded. So use $(document).ready().
the script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code.
Read more about $(document).ready().
check the code below. It will help you to get done what you want.
$(document).ready(function() {
$('.item').first().addClass('first');
});
Otherwise your js is ran even before the DOM is loaded
$(".item:first").addClass('first'); will work fine too.
Try the demo too.
Hope this will help you out. If you have any questions please don't hesitate to ask. Thanks
Here is the jQuery code
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Regards,
http://www.santoshkori.com
see jsfiddle here
$(document).ready(function() {
$('div:first').addClass('first');
});
You could always use straight CSS, although it is CSS3. E.g. you could replace your curre t CSS with:
.item:nth-of-type(1), .item:nth-of-type(3)
{
background-color:#0099FF;
}
If you do just want jQuery then you could try:
$('.item:first').addClass('first');
$('.item:last').addClass('last');
Try this
JS CODE
$(document).ready(function(){
$('div.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
});
DEMO
Note
you need to use $(function() { ... }) to wrap whole jQuery code.

jQuery or JavaScript auto click

How can I auto click on the link on page load? I have been trying for ages but id does not work.
<link rel="stylesheet" type="text/css" href="leightbox.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="leightbox.js"></script>
</head>
<body>
<div class="content">
<p> Click here to activate leightbox popup.</p>
</div>
<!----------// POPUP (ON CLICK) //---------->
<div id="pop02" class="leightbox">
×
<div class="scrollbox">
<h1>This popup loads upon clicking a trigger link.</h1>
text</div>
</div>
</body>
You haven't provided your javascript code, but the usual cause of this type of issue is not waiting till the page is loaded. Remember that most javascript is executed before the DOM is loaded, so code trying to manipulate it won't work.
To run code after the page has finished loading, use the $(document).ready callback:
$(document).ready(function(){
$('#some-id').trigger('click');
});
First i tried with this sample code:
$(document).ready(function(){
$('#upload-file').click();
});
It didn't work for me. Then after, tried with this
$(document).ready(function(){
$('#upload-file')[0].click();
});
No change. At last, tried with this
$(document).ready(function(){
$('#upload-file')[0].click(function(){
});
});
Solved my problem. Helpful for anyone.
$(document).ready(function(){
$('#some-id').trigger('click');
});
did the trick.
$(document).ready(function(){
$('.lbOn').click();
});
Suppose this would work too.
In jQuery you can trigger a click like this:
$('#foo').trigger('click');
More here:
http://api.jquery.com/trigger/
If you want to do the same using prototype, it looks like this:
$('foo').simulate('click');
You are trying to make a popup work maybe? I don't know how to emulate click, maybe you can try to fire click event somehow, but I don't know if it is possible. More than likely such functionality is not implemented, because of security and privacy concerns.
You can use div with position:absolute to emulate popup at the same page. If you insist creating another page, I cannot help you. Maybe somebody else with more experience will add his 15 cents.

Categories

Resources