I have an html page something like this:
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;">
<span class="glyphicon glyphicon-ok-circle span-current"></span>
</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;">
<span class="glyphicon glyphicon-star-empty span-star"></span>
</button>
</div>
I want to get the filename which is present in <a> when user clicks one of the button. I tried in doing like this but its not working:
$(document).on('click','.btn-current',function(){
var file = $('.btn-current').closest('.a-file').text();
alert(file);
});
.closest() only searches for the parent so you can go to the parent list-group-item and then you can find the child using .children(). It is better to use id to search in DOM as it is indexed and search is faster.
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').closest('.list-group-item').children('.a-file').text();
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>
closest is a bit of a misnomer; it finds the nearest direct ancestor that matches the given selector.
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
It looks like you want to select the previous element instead:
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current')[0].previousElementSibling.textContent;
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>
Or if there might be other elements in between, then use .find:
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').parent().find('.a-file').text();
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;"><span class="glyphicon glyphicon-ok-circle span-current">btn-current</span></button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>
You can find previous element with prev() function of jquery.
$(document).on('click','.btn-current',function(){
var file = $(this).prev('.a-file').text();
alert(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group-item" style="border-left: none; border-right: none;">
<img src="./img/desktop.png" height="25" width="25">
<a class="a-file">testcase.txt</a>
<button class="btn btn-default btn-sm btn-current" style="float: right;">
<span class="glyphicon glyphicon-ok-circle span-current"></span>Click</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>
If you have multiple .btn-current, you need to use this as selector. You might want to use prev instead of closest if the element is the previous clicked elements.
$(document).on('click', '.btn-current', function() {
var file = $(this).prev('.a-file').text();
console.log(file);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="a-file">testcase1.txt</a>
<button class="btn btn-default btn-sm btn-current"><span class="glyphicon glyphicon-ok-circle span-current"></span> Btn 1</button>
<br />
<a class="a-file">testcase2.txt</a>
<button class="btn btn-default btn-sm btn-current"><span class="glyphicon glyphicon-ok-circle span-current"></span> Btn 2</button>
<button class="btn btn-default btn-sm btn-star" style="float: right;"><span class="glyphicon glyphicon-star-empty span-star"></span></button>
</div>
You can also use siblings method to find all siblings of selected element. You can also use selector expression to find particular sibling e.g siblings('some selector expression').
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').siblings('.a-file').text();
console.log(file);
});
$(document).on('click', '.btn-current', function() {
var file = $('.btn-current').siblings('.a-file').text();
alert(file);
});
Related
I have two buttons, when I click any of one the function add the class "selected" but if I push the other button the two buttons keep the same class, I used the siblings selector but don't works correctly, ¿can you help me please?
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected');
$('.btn-group').siblings('a.btn-switch-view-selected').removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true"></i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true"></i>
</a>
</div>
You already have the anchor in this, now target the sibling anchors, and remove the class
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected')
.siblings()
.removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true">Button</i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true">Button</i>
</a>
</div>
$('.btn-group').siblings('a.btn-switch-view-selected')
is supposed to be
$(this).siblings('a.btn-switch-view-selected')
as you are trying to target siblings of .btn-switch-view (which is the element that is clicked) and not .btn-group
I have this code :
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
I would like select all buttons from div #filters except the only one with #sort, using jQuery's selector.
Currently I have tried to achieve this by following code.
$('#filters').not('#sort').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button:not("#sort")', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
Can you help me ?
Any help in this would be greatly appreciated.
Use .not() in your selector and find buttons as $('#filters > button') by using Child Selector (“parent > child”)
Your question and code is bit confusing but It says that you want to apply the active class on button when it clicked and removed from other buttons.
The following click event will work on all the buttons except #sort.
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
Use $("#filters *").not("#sort") selector.
Please check below snippet for more understanding.
$("#filters button").on("click",function(){
$("#filters *").not("#sort").removeClass('active');
$(this).not("#sort").addClass('active');
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
You could use a css :not selector like this:
$("#filters button:not('#sort')")
<div id="Comment_1" class="panel-body">Back when I was in high school
<div>Ajay(725) <span class="sl-date">7/28/2016 2:48:37 PM</span>
</div>
<div class="panel-footer">
<a class="btnDisapproveComment btn btn-outline m-r-10 btn-danger" action="Disapprove" iid="1" href="javascript:void(0)">Disapprove</a>
<a class="btnEditComment btn btn-outline m-r-10 btn-warning" iid="1" href="javascript:void(0)">Edit</a>
<a class="btnFlagComment btn btn-outline m-r-10 btn-default " iid="1" href="javascript:void(0)">Flag it</a>
<a class="btnAllActionComment btn btn-outline m-r-10 btn-info" action="Feature" iid="1" href="javascript:void(0)">Feature it</a>
</div>
</div>
Use NodechildNodes property which will return all the child nodes including TextNodes
var elem = document.getElementById('Comment_1');
elem.childNodes[0].textContent = "Your Text"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Comment_1" class="panel-body">Back when I was in high school
<div>Ajay(725) <span class="sl-date">7/28/2016 2:48:37 PM</span>
</div>
<div class="panel-footer">
<a class="btnDisapproveComment btn btn-outline m-r-10 btn-danger" action="Disapprove" iid="1" href="javascript:void(0)">Disapprove</a>
<a class="btnEditComment btn btn-outline m-r-10 btn-warning" iid="1" href="javascript:void(0)">Edit</a>
<a class="btnFlagComment btn btn-outline m-r-10 btn-default " iid="1" href="javascript:void(0)">Flag it</a>
<a class="btnAllActionComment btn btn-outline m-r-10 btn-info" action="Feature" iid="1" href="javascript:void(0)">Feature it</a>
</div>
</div>
You can do the following if you want to change the text in that div
$('#Comment_1').text('I am to lazy to search the www for a simple tutorial on appending a text to a div');
I assumed you want to change "Back when I was in high school" only.
If so add span for the same, like., <span class="span-text-to-replace">Back when I was in high school</span>
Then,
$(".span-text-to-replace").text("My new text");
In case you don't want to add any span/div, you could do this,
document.getElementById("Comment_1").childNodes[0].textContent = "My new text"
The above line changes the content.
Hope I answered your question!
I have wrote a jQuery to change the button colour to red when some one clicks on it. But that is only work with the first panel but its not working for the rest of the panels. In the first set of button it works but not only for everything. This is the jQuery part.
function DurationOnClick(element){
var buttonId = element.id;
var buttonName = element.name;
var buttonIds = ["1Hour", "30Min", "1Day" , "1Week", "1Month"];
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//after user click the option here we are changing the option black to red.
$(buttonIds).each(function(i, e) {
$('#'+e+'[name='+buttonName+']').css("color", "");
});
$('#'+buttonId+'[name='+buttonName+']').css("color", "Blue"); `
The html code is like this :
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Hour" style="color:Red" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
After removing the first panel the colour changing will happen for the next immediate chart but the charts below that one the changing colour is not happening. Any help to figure out the issue will be really appreciated.
Please use the below code. This will work perfect with your case:-
function DurationOnClick(ref) {
var buttonName = $(ref).attr("name");
$("button[name=" + buttonName + "]").each(function () {
$(this).css("color", "");
});
$(ref).css("color", "Blue");
}
As already explained the problem is you have duplicate IDs, the id-selector will select only the first element with the id so your code will always select the first set of elements.
But a more jQuery-ish solution will be use jQuery event handlers along with class(duration) to group them like
$('button.duration').click(function() {
$(this).addClass('selected').siblings('.selected').removeClass('selected');
})
.btn.btn-default.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="MemoryConsumption" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="MemoryConsumption" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body">
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="30Min">30 mins</button>
<button class="btn btn-default btn-xs duration selected" name="LoadAverage" data-id="1Hour">1 hour</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Day">1 day</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Week">1 week</button>
<button class="btn btn-default btn-xs duration" name="LoadAverage" data-id="1Month">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
</div>
</div>
</div>
</div>
</div>
</div>
You have duplicated ID. Your code is ok, but you did it wrong.
id attribute is considered unique.
classattribute is considered multiple.
You have put several same id, but CSS and JS are looking only for ONE, so they process the first (only) and leave.
Change id to class.
Example: class="30mins" will turn redall the "30mins" buttons.
Do it for every group you want to turn red on click.
You should not have duplicate ID in the HTML form. Consider using the first set of IDs only.
Apparently you cant have numbers as the first character of an ID or class for your css to apply. If you#re applying style to your 30min 1hour etc, you should consider renaming them. I'm not sure if this conflicts with JS as well. See this example:
<div class="char">char</div>
<div class="char1">char1</div>
<div class="1char">1char</div>
<div class="1111">1111</div>
JSFiddle
This is what i'm trying:
As you will see, the collapse works well (I did it on html, using button classes), but now the thing is; for example, when I click the buttons of Jimi Hendrix div sound the other songs too, because they have the same Bootstrap class.
I tried to name the buttons of the different div's with different id's but doesn't work. The code:
//HTML
<body>
<div class="container">
<h2>Songs</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Creedence Clearwater Revival<small> I Heard it Through the Grapevine</small></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="buttons">
<button type="button" class="btn btn-default btn-lg button-skip-backward">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-stop">
<span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-play">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" class="btn btn-default btn-lg button-skip-forward">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
<audio src="CCRGrapevine.mp3" id="ccr"></audio></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Jimi Hendrix <small> Hey Joe</small></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="buttons">
<button type="button" id= "enrera" class="btn btn-default btn-lg button-skip-backward">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" id= "pausa" class="btn btn-default btn-lg button-pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" id= "stop" class="btn btn-default btn-lg button-stop">
<span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" id="play" class="btn btn-default btn-lg button-play">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="endavant" class="btn btn-default btn-lg button-skip-forward">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
<audio src="heyjoe.mp3" id="jimi"></audio></div>
</div>
</div>
</div>
Note that I tried to do this with the id's:
//JQuery and JS
$(document).ready(function() {
console.log("ready!");
var audioElement = $("#ccr")[0];
var audioElement2 = $("#jimi")[0];
$(".button-pause").on("click", function() {
$(".button-pause").blur();
$(".button-pause").addClass("active");
$(".button-play").removeClass("active");
audioElement.pause();
});
$(".button-play").on("click", function() {
$(".button-play").blur();
$(".button-play").addClass("active");
$(".button-pause").removeClass("active");
audioElement.play();
});
$(".button-stop").on("click", function() {
$(".button-stop").blur();
$(".button-play").removeClass("active");
$(".button-pause").removeClass("active");
audioElement.pause();
audioElement.currentTime = 0;
});
$(".button-skip-forward").on("click", function() {
$(".button-skip-fastword").blur();
audioElement.currentTime += 5;
});
$(".button-skip-backward").on("click", function() {
$(".button-skip-backward").blur();
audioElement.currentTime -= 5;
});
});
I tried to do this but all the songs are playing:
$("#pausa").on("click", function() {
$("#pausa").blur();
$("#pausa").addClass("active");
$("#play").removeClass("active");
audioElement.pause();
My question is, how can I disable, for example, the buttons of the first div when I click on another div, in order to play just the song i want?
You should be using $(this) to refer to a specific button
Try the following
$(".button-pause").on("click", function() {
$(this).blur();
$(this).addClass("active");
$(this).siblings(".button-play").removeClass("active");
var audioElement = $(this).siblings('audio');
audioElement.pause();
});
Then modify the other click handler accordingly
Hope it works
You can access the parent of the button that is clicked and use the id of that parent div element which is in your case collapse1 , collapse2 etc.
.parent() gives you the immediate parent element. Care must be taken while nesting and calling the .parent() function.
An example based on your submitted code:
$(".button-pause").on("click", function() {
var id = this.parent().parent().parent().attr('id');
$("#"+ id +" .button-pause").blur();
$("#"+ id +" .button-pause").addClass("active");
$("#"+ id +" .button-play").removeClass("active");
audioElement.pause();
});
You should apply the following code on all jquery .on() events.