Develop Reference

Dropdown Toggle working only for alternative buttons and not all buttons

I have multiple dropdown buttons with the same class as they were dynamically added to the page. I want to toggle the dropdown on the clicked button and not all.
I am using closest() and find() to do that, but this works only alternatively and not for every button.
For example if I click button 1 it works and not for button 2 and it again works for button 3 and not button 4 and it goes on with dynamic buttons.
$('.btn').click(function() {
$(this).closest('div').find('.dropdown-content').toggleClass('show');
});
.dropdown-content { display: none; }
.dropdown-content.show { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>
<div class="dropdown pull-right">
<button class="btn" type="button" data-toggle="dropdown"> <i class="fa fa-ellipsis-v"></i> </button>
<div class="dropdown-content">
// content
</div>
</div>

How to extract name from a button (jQuery navigation)?

A part of source code on a specific site looks like this:
.
.
.
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.
.
.
How do I grab each data-id value?
I tried
$('.list-group-item').each(function(){
var text = ($(this).text());
console.log(text);
});
But it returns item 1(2), description and Unsubscribe text.
I also tried
$('.btn btn-default btn-xs pull-right listing-sub-remove').each(function(){
var text2 = ($(this).text());
console.log(text2);
});
But this doesn't work at all.
What command should I use to grab data-id values successfully?

You could do it like this:
$(document).ready(function() {
$(".btn.btn-default.btn-xs.pull-right.listing-sub-remove").each(function() {
console.log($(this).data("id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>

Is this what you're looking for?
// We gather ALL elements with '.list-group-item' class
var elements = $(".list-group-item");
// We iterate over each element in the array of elements
$.each(elements, function(index, element) {
// We create a variable that takes the child link anchor [a tag], and grabs the data-id attribute from it
var dataId = $(element).find("a")[0].dataset.id;
// If the variable is not undefined, it will console log the result
if (dataId) { console.log(dataId); };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.

Get nearest element on button click

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);
});

Select all buttons except one with jQuery -2

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')")

Vertical group of buttons in Bootstrap 2.3.2

Bootstrap 3 has CSS class btn-group-vertical. Could you help me please, how can I achieve the same result in Bootstrap 2.3.2?
Here is what i want to achieve:
http://jsfiddle.net/Lc9012o6/
Here is the same group of buttons in Bootstrap 2.3.2
http://jsfiddle.net/999tv48t/
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Add
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>Vertex</li>
<li>Edge</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Update
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>Vertex</li>
<li>Edge</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Remove
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li>Vertex</li>
<li>Edge</li>
</ul>
</div>
<button type="button" class="btn btn-default">Merge vertices</button>
</div>
edit:
When I use css class btn-group btn-group-vertical, behaviour of dropdown buttons is strange http://jsfiddle.net/q0r49anL/

this is CSS update of .btn-group-vertical class:
.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
display: block;
}
.btn-group-vertical>.btn:last-child {
border-radius: 4px;
}
live preview: http://jsfiddle.net/999tv48t/5/