This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery id selector works only for the first element
I want jquery to select all divs with id = box:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/sizer.js"></script>
<title>
Design tests
</title>
</head>
<body>
<div id="box" style="width:300px;">
Hallo
</div>
<div id="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$("#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
</body>
</html>
But it only selects the first one. Can somebody please help me? This isn't difficult is it?
HTML allows only one element with a given id. That's the reason (internally jQuery uses getElementById which returns one element).
From the spec :
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
If you want to select more than one element, use a class, not an id :
<div class="box" style="width:300px;">
Hallo
</div>
<div class="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
You cannot have more than 1 same ID, use a class instead
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/sizer.js"></script>
<title>
Design tests
</title>
</head>
<body>
<div class="box" style="width:300px;">
Hallo
</div>
<div class="box" style="width:300px;">
Hallo
</div>
<script>
$(document).ready(function(){
$(".box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
</script>
</body>
</html>
change your selector to div#box and it'll work like so
$(document).ready(function(){
$("div#box").mouseenter(function(){ $(this).css("border", "1px gray outset");}).mouseleave(function(){ $(this).css("border", "none");});
});
Also note that it's bad practice to have multiple elements with the same id.
The syntax $('#box') means go and select the first element whose id matches "box". What you want to do is using class instead or if you insist on using id $('div[id="box"]') will do what you want
Related
I trying to change the color of a "p" tag using getElementById(), but its not working...
HTML:
<p id="fon">changing color</p>
JavaScript:
var c = document.getElementById(fon);
c.style.color = 'blue';
The id should be in quotation marks
document.getElementById("fon");
If you want to change paragraph color using JS. You can use this code .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function changecolor()
{
document.getElementById("fon").style.color='blue';
}
</script>
</head>
<body>
<p id="fon" onclick="changecolor()"> hello this is a para</p>
</body>
</html>
Why the below if statement does not give me the desired results. Every time it just give me a yellow paragraph even though the concerned word does not satisfy the :contains expression. I am pasting the query below.
$(document).ready(function() {
if ($("p:contains(x)")) {
$("p").css("background-color", "yellow");
} else {
$("p").css("background-color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.2.0.min.js"></script>
<script src="scripts/script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is a heading</h1>
<p class="hand">This is a paragraph</p>
<p>glow</p>
<p>The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.</p>
<div style="color:blue;"></div>
</body>
</html>
I couldn't see a reference to the variable x - so I just made it up :). The following determines is the string "glow" is in the p and makes the background yellow. Any p that does not contain "glow" has a background colour of red. I would however suggest adding / removing classes rather than adjusting the CSS directly.
$(document).ready(function(){
$("p:contains('glow')").css("background-color", "yellow");
$("p").not(":contains('glow')").css("background-color", "red");
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>This is a heading</h1>
<p class="hand">This is a paragraph</p>
<p>glow</p>
<p>The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.</p>
<div style="color:blue;"></div>
</body>
</html>
you want to use condition means you have to check whether the value of length is greater than 0. other wise you can simply use
$("p").css("background-color", "red");
$("p:contains(glow)").css("background-color", "yellow");
which sets the background color for all paragraph as red and the selected one as yellow
$(document).ready(function() {
if ($("p:contains(glow)").length > 0) {
$("p").css("background-color", "red");
$("p:contains(glow)").css("background-color", "yellow");
} else {
$("p").css("background-color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>This is a heading</h1>
<p class="hand">This is a paragraph</p>
<p>glow</p>
<p>The heading, paragraph and button element have a click event defined. Click on each element to display which element triggered the event.</p>
<div style="color:blue;"></div>
</body>
</html>
I want to do text editor and change the texts which is inside the content editable elements and also selected by the user.
my question is:
How to get the selected texts inside the content editable elements?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
//alert("selected texts");
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444" contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
This should get you started, although you will need to consider expanding on this code to cater for situations where someone selects outside of your text area and when someone presses the button and nothing is selected.
Oh, and I have console logged the output rather than alerted it.
$(document).ready(function(){
$("#show").click(function(){
range = window.getSelection().getRangeAt(0);
console.log(range.toString());
});
});
You can use window.getSelection() method.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="D:\JQueryPath\jquery-3.1.1.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
alert(window.getSelection().toString());
});
});
</script>
</head>
<body>
<div id="textEditor" style=" border:solid 1px #D31444"contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>
Hello I am very new to ExtJs please help me knowing Ext.get()
This works:
Ext.get('tag2').hide(); // worked well on with Id
<div id ="tag2">using id</div><!--given with id-->
Now this is the problem
Ext.get('tag2').hide()//hiding only id not class
<div class ="tag2">using class</div><!--given with class-->
Doesn't work on class.
Take a look the complete code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('tag2').hide()//hiding only id not class
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'show',
listeners: {
click: function() {
this.hide();
},
hide: function() {
Ext.get('tag1').hide();
Ext.get('tag2').show();//not working hear
}
}
});
});
</script>
</head>
<body>
<div class ="tag1">Test Div</div>
<div class ="tag2">using class</div><!--given with class-->
<div id ="tag2">using id</div><!--given with id-->
<div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- >
</body>
</html>
Use the following instead of get. Get accepts the id, for querying classes, you need to use select.
Ext.select('.tag2').hide();
UPDATED
Ext.get() is using ID to find element.
Ext.select(selector) - use this to access DOM element by class selector
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tag = Ext.get('tag');
var tagTwo = Ext.select('.tag2');
console.log(tag);
console.log(tagTwo);
tag.hide(); // hide by ID
tagTwo.hide(); // hide all divs with tag2 class value
});
</script>
</head>
<body>
<div id="tag">Test Div</div>
<div class="tag2">Test Div2</div>
<div class="tag2">Test Div3</div>
</body>
</html>
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().