How do I get the contents of a div using Jquery.
Here is my HTML:
<div class="DataRow" data-vendorid="67">
<div class="DataColumn" style="width: 60%;">
Barracuda
</div>
<div class="DataColumn" style="width: 20%; text-align: center;">
1
</div>
<div class="DataColumn" style="width: 20%; text-align: center;">
2
</div>
</div>
Here is my Jquery:
$(function () {
$('.DataRow').click(function () {
// get value: Barracuda
});
});
$(function () {
$('.DataRow').click(function () {
alert($(this).find(':first-child').text());
});
});
Or:
$(function () {
$('.DataRow').click(function () {
alert($(this).children().first().text());
});
});
If you need to get content of the clicked div it might help you.
$(function () {
$('.DataRow').click(function (event) {
alert(event.target.innerHTML);
});
});
DEMO 1
If you need to get only the first value:
$('.DataRow').click(function () {
var first = $(this).children().eq(0).html();
alert(first);
});
DEMO 2
If you need to get only "Baracuda", i.e. first div text, you could use innerHTML like this:
$(function () {
$('.DataRow').click(function () {
// get value: Barracuda
alert($(this).children("div")[0].innerHTML);
});
});
Here is an example.
You could also use this:
var value=$(".DataColumn").html();
To get the contents of the first child:
$('.DataRow').click(function () {
var first = $(this).children(":first").html();
});
To get the contents of the third child:
$('.DataRow').click(function () {
var third = $(this).children(":eq(2)").html();
});
Related
I have a listbox
<div id="listboxid1" class="listboxFilters">
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test2</div> <div class="listboxChosenFilter">3</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test</div> <div class="listboxChosenFilter">*</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">gro</div> <div class="listboxChosenFilter">2</div> </div>
</div>
its a normal listbox, the question is now , how can I only set one element to active , and the others then to inactive
my first guess was an onlick on an item, I add a classname named active and before I would do a foreach for the listboxid1 element and set all to inactive, but is this really the common and best way?? :
<script>
function clearAll(element) {
element.each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.removeClass("active");
});
});
}
jQuery.fn.multiselecter = function () {
$(this).each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.click(function () {
clearAll(checkbox.parent());
checkbox.addClass("active");
});
});
});
};
$("#listbox1").multiselecter();
</script>
I guess you are using jQuery, so try this functions:
On click on anyitem with class .listboxFilterItem call setActive function
$('.listboxFilterItem').click(setActive($(this)));
function setActive(var elem){
$('.listboxFilterItem').each(function(){
$(this).removeClass('active');
});
elem.addClass('active');
}
Try this:
$(".listboxFilterItem").click(function (e) {
$(".listboxFilterItem").removeClass("active");
// or $(".active").removeClass("active");
$(this).addClass("active");
});
Check this on jsfiddle
$(this) - element, which was clicked
$(this).siblings() - all his neighbours, except himself.
$(".listboxFilterItem").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
some link
some link
<div class="didattica">Didattica</div>
some link
<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
some link
<div class="didattica">Didattica</div>
some link
some link
<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
some link
I'd like to have .amministrazione, .didattica and all the links on display:none by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.
Here's what I have so far.. but it's not toggling the correct elements:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
http://jsfiddle.net/2rgqpzpt/
Use nextAll with the :first selector to target the appropriate divs:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
jQuery('.amministrazione, .didattica').slideUp();
jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
});
});
Fiddle 1
You could accomplish the same thing using nextUntil:
jQuery(function () {
var un= jQuery('.unique1, .unique2, .unique3, .unique4');
un.click(function () {
jQuery('.amministrazione, .didattica, a').slideUp();
jQuery(this).nextUntil(un).stop().slideDown();
});
});
Fiddle 2
You can change your code with
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = $(this).next('.amministrazione');
newTarget= newTarget.add(newTarget.next());
newTarget.slideDown()
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
I have this html:
<div class="row">
<article>1</article>
<article>2</article>
<div class="load-work"></div>
<article>3</article>
<article>4</article>
<div class="load-work"></div>
<article>5</article>
<article>6</article>
</div>
What I want to do is to find nearest .load-work to clicked article. My current JS is:
$('article').each(function() { $(this).on('click', function() {
$('.load-work').each(function() {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).closest('.row').find('.load-work').show().addClass('loaded-work')
})
});
But it doesn't work - it finds each. Here's jsfiddle
You can try this with .nextAll() and :first:
$('article').on('click', function () {
$('.load-work').each(function () {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).nextAll('.load-work:first').show().addClass('loaded-work');
});
Fiddle
Or better one:
$('article').on('click', function () {
$('.load-work').each(function () {
$(this).hide().removeClass('loaded-work').html('');
});
if($(this).nextAll('.load-work:first').length){
$(this).nextAll('.load-work:first').show().addClass('loaded-work');
}else{
$(this).prevAll('.load-work:first').show().addClass('loaded-work');
}
});
Updated fiddle
Use following
$('article').each(function() { $(this).on('click', function() {
$('.load-work').each(function() {
$(this).hide().removeClass('loaded-work').html('');
});
$(this).parent().closest('.row').find('.load-work').first().show().addClass('loaded-work')
})
});
Working fiddle=> http://jsfiddle.net/naw8W/3/
I have an element that I am using as an expander. When I click on it uses the toggle function to show/hide the expander-container element.
<script type="text/javascript">
$(document).ready(function () {
$(".expand-icon").click(function () {
$(".expander-container").toggle(500);
});
});
<img class="expand-icon" src="./Content/Icons/toggle-expand-icon.png" alt="some_text" />
<div class="expander-container" >
...
</div>
How can I target only the next occurence of the expander-container element without targeting all of them on the page?
I think you should go for go for
$(".expand-icon").click(function () {
$(this).next('.expander-container').toggle(500);
});
Use .next()
$(document).ready(function () {
$(".expand-icon").click(function () {
$(this).next(".expander-container").toggle(500);
});
});
Here is the working demo : http://jsfiddle.net/XLNM5/