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
Related
So, I have a simple code that I can't get it to work. I tried to find answers on the same topic here, but being new to jQuery all answers seem too complicated.
Anyways, what I want to do is have the same script run for different divs. After some reading here I managed to arrange the following code, but it doesn't seem to work.
<div id="mydiv1" onclick="handleClick(this)" style="position:relative; left:0px;">Div One</div>
<div id="mydiv1a" style="position:relative; left:0px;">Div One A</div>
<div id="mydiv2" onclick="handleClick(this)" style="position:relative; left:0px;">Div Two</div>
<div id="mydiv2a" style="position:relative; left:0px;">Div Two A</div>
<script>
$(document).ready(function(){
function handleClick(x) {
$(x.id + 'a').fadeToggle("slow");
}
}
</script>
What I want this to do is when I click #mydiv1, the function should run on #mydiv1a. And the same for #mydiv2. Thank you in advance for your help!
It's better to assign the handling within your script (not inline in html). Bonus for that is that you can use jQuery delegation, i.e. assign a click handler on the document body for a number of elements within the body. Furthermore, the styling should be in a css tag/css file where possible (why?). In this case both position and left are useless. The snippet shows all this:
$('body').on('click', '#mydiv1, #mydiv2', handleClick);
// ^ handler on body | |
// for elements |
// handler method
function handleClick(e) {
$('#'+this.id+'a').fadeToggle('slow');
}
#mydiv1, #mydiv2 {
cursor: pointer;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="mydiv1">Div One</div>
<div id="mydiv1a">Div One A</div>
<div id="mydiv2">Div Two</div>
<div id="mydiv2a">Div Two A</div>
You need to use # which is how you select element with a specific id in jQuery or css for that matter
$('#' + x.id + 'a').fadeToggle("slow");
But you can simplify your code to the below
$('div').filter(function(){ return /\d+$/.test(this.id) }).click(function(){
$(this).next().fadeToggle("slow");
});
Try this
$(this).next().fadeToggle("slow");
This code creates a click event for both divs. The event will be aware of the specific div clicked.
$(function(){
$("#mydiv1, #mydiv2").click(function(){
$(this).fadeToggle("slow");
});
});
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 many questions here so please be patient with me, very new jquery/javascript user.
Here is my current page http://integratedcx.com/index.php/experience
Basically I would like each of the projects and project categories to have the hidden div, slidedown like a drawer not just appear as they do now.
I have tried to achieve this through jquery without much success, here is my working http://integratedcx.com/temp/slide.html
How do I get the div below the one opening to "ease" down instead of jump
How do I get my close feature (orange box) in recent projects to work properly
How do I get my the project list on the right side of image to hide (as it does on my current page) as well as have the drawer opening effect.
Is there an easy way to i.e. variable to assign this to multiple divs using jquery.
Thank you in advanced for any/all help.
For your question 4, With the following script (based on ComputerArts's answer above), you can easily add the slide effect to a large number of divs:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
Then, you can mark up the toggle buttons and sliders as follows:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
As for points #1 and #2, try this fiddle
I only changed the first script tag to
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
FYI, you don't need to use $(window).load and then $(document).ready... one is enough
As for #3, I don't understand what you're trying to say.
#4, yes there is a way, using classes and keeping the structure the same for every bloc in your page.
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
Using both of the methods from 1, and 2
By using class names instead of IDs for your selectors. For example:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
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 ')
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.