i have this click function note when clicked it should change a couple of css values using jquery, here goes:
$('a.note').click(function(){
$('#leftpanel').css('border-left-width', '20px');
$('#commentbox').css('visibility', 'hidden');
$('.date').css('visibility', 'visible');
});
html:
<div id="leftpanel>blahbalhbalh number 1</div>
<div id="leftpanel>blahbalhbalh number 2</div>
but the jquery only chnages the css of the first leftpanel div, and not the second one, how can i resolve this or is thier a problem, thanks!!!!
The id should be unique per element per page, that's your problem, you should do:
<div id="leftpanel">blahbalhbalh number 1</div>
<div id="leftpanel2">blahbalhbalh number 2</div>
Or you can use same class instead if you want:
<div class="leftpanel">blahbalhbalh number 1</div>
<div class="leftpanel">blahbalhbalh number 2</div>
And then you can use jQuery to target via class as well.
Related
I saw that one can calculate the number of divs by id with the following code:
$('div[id^=d]').length
however I want to calculate the number of divs inside a in specific , example below
<div class="DAD">
<DIV CLASS="The DIV BE TOLD"></DIV>
<DIV CLASS="The DIV BE TOLD"></DIV>
<DIV CLASS="The DIV BE TOLD"></DIV>
<DIV CLASS="The DIV BE TOLD"></DIV>
</DIV>
$('div.DAD div').length would do it.
Or
$('div.DAD div.The.DIV.BE.TOLD').length
jsFiddle example
See: http://api.jquery.com/length/
JQuery allows you to use the syntax of CSS selectors (have a look here):
$('div.DAD div').length
should give the answer you're looking for
I have a problem here HERE. I don't know why it doesn't work.
Let's look the following code to understand it better.
HTML
<div class="click">List 1</div>
<div class="information">Info 1</div>
<div class="click">List 2</div>
<div class="information">Info 2</div>
CSS
.information {
display:none;
}
JS
$('.click').click(function() {
$('.information').slideToggle('slow');
});
I tried one by one it doesn't work at all. Can you help me fix it?
Thanks
Your code does exactly what it should - it runs slideToggle on all .information tags.
If you just want the one right after the clicked item, you can do:
$(this).next('.information').slideToggle('slow');
Your selector inside the click callback must be specific to the element that was clicked.
$('.click').click(function() {
$(this).next('.information').slideToggle('slow');
});
WORKING JS FIDDLE DEMO
I have a series of divs with class '.collection-list'. Within each one I need to add a class to every other child div '.streamItem'. These are loaded via an ajax call on a click event.
The problem I am having is that the class is being added to every other '.streamItem' from the top of the page on down. What I want is for the alternating to start and end within each parent '.collection-list' without effecting the others.
The goal is a two column layout for which which I need to add a different class for the items in the right column, but The first item should never have that class.
Here is what I have so far which is failing to do what I have in mind:
$(document).ajaxComplete(function () {
$('.collection-list').each(function(index) {
$('.streamItem:even').addClass('right');
})
});
There is no need for an each loop:
$('.collection-list').find('.streamItem:even').addClass('right');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vZdLc/
Basically the find is applied to each collection-list, but only matching the even streamItems within each.
You should modify the selector to target only child elements of current div in .each() loop:
$('.collection-list').each(function(index) {
$(this).find('.streamItem:even').addClass('right');
});
or
$('.collection-list').each(function(index) {
$('.streamItem:even',this).addClass('right');
})
If you want to use .each() to addClass check out my answer and $(this) was what you were missing in your code
Jquery
$('.streamItem:even').each(function() {
$(this).addClass('right');
});
CSS
.right{
color: green;
}
HTML
<div class="collection-list">
<div class="streamItem">item 1</div>
<div class="streamItem">item 2</div>
<div class="streamItem">item 3</div>
</div>
<div class="collection-list">
<div class="streamItem">item 1</div>
<div class="streamItem">item 2</div>
<div class="streamItem">item 3</div>
<div class="streamItem">item 4</div>
</div>
DEMO
For this Output
Use This Code
$( "div.streamItem:nth-child(odd)" ).addClass('right');
Demo
For this Output
Use This Code
$( "div.streamItem:nth-child(even)" ).addClass('right');
Demo
Was This Output Which you were getting and wanting to change to one among the above two
$('div.streamItem:even').each(function() {
$(this).addClass('right');
});
Demo
I have html code
<div content="Something 1">Content 1</div>
<div content="Something 2">Content 2</div>
<div content="Something 3">Content 3</div>
I want to use jQuery to replace content of HTML with this content attribute.
<div content="Something 1">Something 1</div>
<div content="Something 2">Something 2</div>
<div content="Something 3">Something 3</div>
I don't know how to select multi object.
Any one help me please.
Thanks.
ID's cannot contain spaces.
This will replace all instances of Content x with Something x, getting x from the id.
$("div").each(function(){
$(this).text($(this).attr("id"));
});
Example 1: http://jsfiddle.net/charlescarver/xuGEq/2/
This will replace all instances of Content x with Something 1:
$("div").each(function(){
$(this).text("Something 1");
});
Example 2: http://jsfiddle.net/charlescarver/xuGEq/1/
If all of your id's will start with the prefix something, use:
$("div[id^='Something']").text("Something 1")
If what you are looking for is to edit all the div tags in your document, you could simply:
$("div").text("Something 1")
If you know exactly what html tags are those that you want to edit, I recommend you to mark them with a class. Lets say:
<div id="Something 1" class="editable">Content 1</div>
<div id="Something 2" class="editable">Content 2</div>
<div id="Something 3" class="editable">Content 3</div>
This way you could simply do:
$(".editable").text("Something 1")
In case you want to modify their inner text. or:
$(".editable").html("<strong>Something 1</strong>")
In case you want to give them a richer format modifying not only their text but also their inner HTML.
It is a bad practice to use ids with spaces. Chrome won't complain about it, but
some other browser will. So only in case you are using ids like "Something 1", it would be better to use "something_1" (It is a convention to use lowercase for attributes and html tags).
Here you have a link that explain how selectors work in jQuery:
http://api.jquery.com/
Try this if you dont want to affect all the divs on the page, but only the one containing something in their id...
$("[id^=Something]").each(function(){
$(this).text("Something 1");
});
Note that using spaces inside a id is not the way to go, you should name them somthing like "something1" ....
I know that .append puts the code at the end, and .prepend puts it in the front, but I have 5 divs within a parent div, and I want some html code to be added dynamically right before the last child div. How can I do that?
$('#parent > div:last-child').before('<span>something</span>');
jsFiddle.
You can flip the whole thing around too.
$('<span>something</span>').insertBefore('#parent > div:last-child');
$('#main div:last-child').before("yourhtmlhere");
http://api.jquery.com/before/
Use insert Before. Refer This for more.
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
You can use the :last pseudo selector and the .before() method
Here's a fiddle : http://jsfiddle.net/Aq6eu/
<div id='parent'>
<div> child div 1</div>
<div> child div 2</div>
<div> child div 3</div>
<div> child div 4</div>
<div> child div 5</div>
</div>
$('#parent div:last').before('some text goes here ')