I'm trying to show hidden rows one at a time on button click, but they all show at once since they have class "row" - the 1st row is shown by default and the rest are hidden
I can't use Id selectors since it's server side and dynamic, so how can I only show the immediate next row/sibling on each click until there are none left? I could append a counter to each row class but that wouldn't help when trying to select the next row in jQuery with that counter
This is what I have which shows all rows on one click
<script>
$(".myButton").click(function() {
$('.container .row').next('.row:hidden').slideDown();
});
</script>
<div class="container">
<!-- 1st row not hidden by default -->
<div class="row">
<div class="row">
<div class="row">
</div>
Thanks for help in advance!
$('.container .row:visible').last().next('.row:hidden').slideDown();
If all you're doing is showing them in a sequential order, then you don't need to track which are active. You can simply use the visibility to always choose the last.
All you do is add the :visible to the row selection, to find all visible rows; then use the last() method to only reference the last of that stack. This allows next() to be called for only one element (the last one), and not all the rows in the container.
To simplify this even more (and call fewer methods), you could choose to only select the first hidden row: $('.container .row:hidden:first').slideDown(); or $('.container .row:hidden').first().slideDown();
Fiddle
If you add the class "selected" to the first row than you could do this:
<script>
$(".myButton").click(function() {
$('.container .row.selected')
.removeClass('selected')
.hide()
.next()
.addClass('selected')
.slideDown();
);
</script>
<div class="container">
<div class="row selected">
<div class="row">
<div class="row">
</div>
You could try iterating through the collection to display the correct one. See this JSFiddle: http://jsfiddle.net/gjqb6m83/
var i = 0;
var collection = $(".row");
$(".myButton").click(function() {
$(collection).css('display', 'none');
$(collection[i]).slideDown();
i++
i = i % collection.length;
});
you can use :nth-child()
$(document).ready(function() {
var counter = 1;
$(".myButton").click(function() {
counter++;
$('.container .row').hide();
$('.container .row:nth-child(' + counter + ')').slideDown();
});
});
.row {
display:none;
}
.row:nth-child(1) {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">My Button</button>
<div class="container">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
<div class="row">row 4</div>
<div class="row">row 5</div>
</div>
Make use of another jQuery-pseudo-selector :first
$(".myButton").click(function() {
$('.container .row:hidden:first').slideDown()
});
and dont forget to close your divs! Look at https://jsfiddle.net/kswmktce/1/
Yet another solution. This one shows just one at a time, and starts over when finished.
$(".myButton").click(function() {
$(".row:visible").next().slideDown();
$(".row:visible").first().hide();
if (!$(".row:visible").length)
$(".row").first().slideDown();
});
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="myButton">Click ME</button>
<div class="container">
<div class="row">a</div>
<div class="row">b</div>
<div class="row">c</div>
<div class="row">d</div>
<div class="row">e</div>
</div>
Related
I have a Div element on my HTML page, and that DIV is coming from an ASP.NET application, so the DIV ID is changing all the time but few words remain the same in that id.
For example:
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid"> </div>
The only things which remains same all the time in above example are "_UWT" & "_NewGrid".
I know how to get the by Exact ID or atleast by using the 1 word in this: $( "div[id$='_UWT']" )
But I need to get this Div element by using the multiple parameters:
I need to check the "_UWT" and "_NewGrid" also.
If both words exist in the Div id, then return me the element only.
I need to get this DIV by JQuery.
I know I can set the ClientID to Static from ASP.NET, but that is not doable in my case.
Thanks.
To achieve this you can combine the 'attribute contains' selector (to find the _UWT) and the 'attribute ends with' selector (to find the _WebGrid), like this:
$('div[id*="UWT"][id$="_NewGrid"]').addClass('foo');
.foo {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04_NewGrid">Not this one</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Not this one</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04_NewGrid">This one</div>
One way could be:
$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red') // do whatever you want with div
}
})
Demo:
$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">11111</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGri">222222222</div>
<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__ctl01_ctl00_ctl04
_NewGrid">3333333333333</div>
Try following way:
Add specific class I added here item-collection:
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">Div 1</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Div 2</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 3</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 4</div>
JS is:
var itemslist = [];
$(".item-collection").each(function(){
if($(this).attr("id").indexOf("_UWT") > -1 && $(this).attr("id").indexOf("_NewGrid")){
itemslist.push($(this))
}
})
console.log(itemslist);
This is the HTML I got to do a button click event to control selected items in more than one list.
$('#button').click(function(){
var $next = $('.section.selected').removeClass('selected').next('.section')
if ($next.length) {
$next.addClass('selected');
}
else {
$(".section:first").addClass('selected');
}
});
//On click I select next div with same class and remove selected from previous.
//How to loop? After 3 is selected, I want it to go to one again.
.selected { background:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<br />
CLICK
However, because the items are using the same class name, at the end, the script can't decide which one is first / last item.
Can anyone give me an idea?
To get the items, use Queries like first-child, last-child and so on.
For more detals, Check jQuery API Documentation
Use this instead $(".section:first-child").addClass('selected') in your else condition
I am working on a drop down menu button that when clicked displays the previously hidden div under it.
This code works without $(this).next but it will display all div's with class .menudrop because there are multiple buttons and drop downs on the page; I am trying to only change the display on the next .menudrop after the .dropclick that was pressed.
JsFiddle: https://jsfiddle.net/jeffd/nuen3735/1/
<div class='playbox'>
<div class='playbox2 playboxplayer player'>
<div class='play' key='respect.mp3' name='Respect' tag='tagtest'></div>
</div>
<div class='playbox2 playboxbpm bpm'>85 BPM</div>
<div class="playbox2 playboxname name">Respect</div>
<div class='playbox2 playboxkeywords keywords'>Slow, Smooth, RnB</div>
<div class='playbox2 playboxlength length'>02:12</div>
<div class='playbox2 playboxbuy buy'>
<div class='mp3buy droptrack' data-product-id='Respect' data-product-key='3c31060e1038c3fe3e9cb0f069d6f33b'>+</div>
</div>
<div class='menudrop'>(dropdown)</div>
</div>
$(".droptrack").on('click', function() {
$(this).next(".menudrop").slideToggle('display', function(i, v) {
return v == 'none' ? 'inline-block' : 'none'
});
});
$(this).next() moves to the next sibling. In your code, .menudrop is not a sibling of .droptrack, but of its father. What you should do is:
$(this).parent().next('.menudrop')
(Tip: proper HTML formatting would help you next time)
$(this).parent().next('.menudrop')
So my code always follows the same kind of format:
<div id="container">
<div id="firstDiv">
</div>
</div>
Sometimes it's like this (and this is what I want to ignore):
<div id="container">
<div id="banner">
</div>
<div id="firstDiv">
</div>
</div>
So what I want to do is
IF the first div inside #container is equal to #firstDiv - add a banner. else (there's already a banner there) do nothing.
Any help with this would be great!!
Thanks!!
You can do that:
if($('#container > div:first').attr('id') == 'banner') {
//banner exists
} else {
//banner not exists
}
Use a child selector:
div#container > div#firstDiv
You can
$('#firstDiv:first-child').before('<div class="banner">banner</div>');
$('#firstDiv2:first-child').before('<div class="banner">banner</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="firstDiv">Div</div>
</div>
<div id="container2">
<div id="banner">Banner</div>
<div id="firstDiv2">Div</div>
</div>
Try this:
if($("#container").find("#banner").lenght == 0){
// You have the banner
}else{
// you dont`n have the banner
}
try this:
(function(){
if(!$('#firstDiv','#container').length){
$('#container').prepend(jQuery('<div id="firstDiv">'));
}
})(jQuery);
With the children() selector you get all the children element of #container.
With the first() you get the first one, and with attr('id') you get the id name.
Then you just have to check what id name you have
Example:
if($("#container").children().first().attr('id') != "banner"){
addBanner();
}
I just need to access the parent div where I have a button changing his siblings divs.
A code example can explain better:
<div class="parent"> <!-- This is structure repeats N times -->
<div class="divToToggleVisiblity divA">trololo A</div>
<div class="divToToggleVisiblity divB">trololo B</div>
<button onClick="toggleThem(this)">This button will toggle above divs</button>
</div>
function toggleThem(a){ // something like this, BUT without Jquery
$(a).closest(".parent").find(".divA").hide();
}
That's what parentNode is for:
a.parentNode.querySelectorAll('.divA');
function toggleThem(elem) {
elem.parentNode.getElementsByClassName('divA')[0].style.display = 'none';
}