In Jquery or JavaScript have a function like .hasNext(). I have the code:
function showArrowClick() {
var activeContact = $('.contact.white_bg');
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
and parent div is
<div class="list">
<div class="contact white_bg all_contacts">All</div>
<div class="contact">Contact1</div>
<div class="contact">Contact2</div>
</div>
After click last div need to do something. How can I do it?
You'll probably want :last-child.
$('a').click(function() {
$('.list .contact:last-child').doSomething();
});
Edit:
Or if you meant clicking the last child itself...
$('.list .contact:last-child').click(function() {
$(this).doSomething();
});
You should verify if there is any element when you're trying to select it:
function showArrowClick() {
var activeContact = $('.contact.white_bg');
if(activeContact.next('div.contact').length > 0) {
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
}
Try Something Like
$('.list').find("div.contact:last").addClass('white_bg');
Second
$('.list .contact:last-child').addClass('white_bg');
Have you looked at $.fn.nextAll()?
Use the:last-child selector
$(".list div:last-child").on('click', function(){
//Do something
});
function showArrowClick() {
var activeContact = $('.contact.white_bg');
var index = activeContact.index();
if (index === $(".contact.white_bg").children().length - 1) {
// Current seleceted is the last div
}
activeContact.removeClass('white_bg');
activeContact.next().addClass('white_bg');
}
You can try .next() to check. read more. Use it with the .length method to get to check if there are any more item on the DOM.
Sample code
alert($('div.contact').next().length);
Related
I want to select two elements and when I click the button element I want them to swap place, how would I do that? I've searched and looked for similar answers, but most of them only swap the element up or down.
I'm thinking something like:
$('button').click(function(){
$('#item 1 .selected-item').removeClass('.selected-item').appendTo('#item2');
$('#item 2 .selected-item').removeClass('selected-item').appendTo('#item1');
});
But I don't know how to start, it should look something like this:
http://jsfiddle.net/tLNAh/1/ (my fiddle)
try this.
http://jsfiddle.net/tLNAh/3/
$("button").on("click", function() {
$first = $(".selected:eq(0)");
$second = $(".selected:eq(1)");
var tempText = $first.text();
$first.text($second.text());
$second.text(tempText);
$("#instructionText").text("Instructions: choose an item");
});
With your markup do this:
$("button").on("click", function() {
$('.selected').insertBefore($('ul:eq(1) li:first'));
});
Demo
Or you can update to this:
$("button").on("click", function() {
if($('.selected').closest('ul').index() < $('.selected').closest('ul').siblings('ul').index()){
$('.selected').insertBefore($('ul:eq(1) li:first'));
}else{
$('.selected').insertBefore($('ul:eq(0) li:first'));
}
});
Updated fiddle
Chk this : fiddle link
Provide id to your ul :
<ul id="item1">
<ul id ="item2">
And try this :
$("button").on("click", function() {
$("#instructionText").text("Instructions: choose an item");
$('#item1 .selected').removeClass('selected').remove().appendTo('#item2');
$('#item2 .selected').removeClass('selected').remove().appendTo('#item1');
});
$("body").on("click","li", function(e) {
$(this).toggleClass("selected");
$("#instructionText").text("Instructions: choose the item to change place with");
});
You have to get index of list elemet and use this:
http://jsfiddle.net/faceleg/FJt9X/2/
var swapElements = function(siblings, subjectIndex, objectIndex) {
// Get subject jQuery
var subject = $(siblings.get(subjectIndex));
// Get object element
var object = siblings.get(objectIndex);
// Insert subject after object
subject.insertAfter(object);
}
$(function() {
swapElements($('li'), 0, 1);
});
Try this:
function swapItems(first, second) {
var sibling = first.next();
if (sibling.length) {
first.insertBefore(second);
second.insertBefore(sibling);
} else {
sibling = first.prev();
if (sibling.length) {
first.insertBefore(second);
second.insertAfter(sibling);
} else {
var parent = firstItem.parent();
first.insertBefore(second);
second.appendTo(parent);
}
}
}
Updated fiddle
Edit: I updated the fiddle, now you have to click the button to swap items.
im trying to check if one of the DIV's has class "visible" which is being add by a jquery plugin, it seems not to work.
it works when i check the first element, but if i want to check next div, it doenst finds it.
help is appreciated.
My DIV
<div class="swiper-slide welcome" id="welcome"></div>
2nd DIV
<div class="swiper-slide intro-early-life" id="intro-early-life"></div>
MY JQUERY
<script type="text/javascript">
$(document).ready(function() {
if ($('.welcome').hasClass('swiper-slide-visible')) {
alert("working");
}
});
</script>
Im not using same ID, maybe it was my bad explanation. I can use the class as well, no difference.
$(document).ready(function() {
if ($('#welcome').hasClass('swiper-slide') && $('#welcome').hasClass('visible')) {
alert("working");
}
});
if ($('#welcome').is(":visible") && $('#welcome').hasClass("swiper-slide")) {
alert("Yeah!");
}
Perhaps that would work better?
Edit: Also swiper-slide-visible class doesn't exist on the page - perhaps this is the issue...?
You can use also as
$(document).ready(function() {
if ($('#welcome').hasClasses(['swiper-slide', 'visible']);) {
alert("working");
}
});
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i]))
return true;
}
return false;
}
});
Use .is()
if ($('#welcome').is('.swiper-slide, .visible'){
Id Must Be unique you can use classes instaed
Two HTML elements with same id attribute: How bad is it really?
You could use .is() instead:
$(document).ready(function() {
if ($('.welcome').is('.swiper-slide.visible')) {
alert("working");
}
});
I have HTML like :
<div id="parent">
<ul class="list">something here....</ul>
</div>
When page load, I want kill div that have id="parent". That means after finish the loading, I have only :
<ul class="list">something here....</ul>
How Javascript or Jquery can do this? Thanks for your help.
Can you try:
$(function() {
$("ul.list").unwrap();
});
Docs for unwrap().
Try this famous code to completely remove div:
document.addEventListener('DOMContentLoaded',function(){
var element = document.getElementById("parent");
element.parentNode.removeChild(element);
},false);
remove element by id
And to remove only parent div use jQuery's unwrap:
$(function() {
$("ul.list").unwrap();
});
OR in plain javascript:
function unwrap() {
var a = document.getElementById('element-to-be-unwrapped');
newelement = a.firstElementChild.cloneNode();
document.body.insertBefore(newelement, a);
a.parentNode.removeChild(a);
}
in jQuery, here is the code:
var ul_holder = $('#parent').html();
$('#parent').remove();
$(document).append(ul_holder);
You can replace $(document) with any other element
Use .unwrap() function
if ( $(".list").parent('#parent').is( "div" ) ) {
$(".list").unwrap();
}
You can use closest() with remove()
$(function() {
$("ul.list").closest('#parent').remove();
});
or you can use unwrap() like,
$(function() {
$("ul.list").unwrap();
});
I'm making a generic delete function that will delete a record and then delete the <tr> if the element is inside a <table>, or the <li> if it's inside a <ul>
The element can be in a list inside a table, so I need to know what parent element is closest.
Is there a way to find out this using jQuery?
If I understand you correctly, you want something like this:
if ($(this).closest('li').length) {
$(this).closest('li').remove();
} else { // must be in a table
$(this).closest('tr').remove();
};
http://api.jquery.com/closest
In the unlikely event your element is in a table inside a li, you need to be more creative:
if ($(this).closest('li').length) {
if ( $(this).closest('li').is($(this).closest('tr').closest('li')) ) {
// then we're in a table inside an li
$(this).closest('tr').remove();
} else {
$(this).closest('li').remove();
};
} else { // must be in a table
$(this).closest('tr').remove();
};
http://api.jquery.com/is
You can use closest() jQuery function.
function elementInTable(element) {
if (element.closest("table").length) return true;
return false;
}
Another solution is to search for each table and see if your element is in the table:
function elementInTable(element) {
element = $(element);
$("table").each(function () {
var currentTable = $(this);
if (currentTable.find(element).length) {
return true;
}
});
return false;
}
I guess it's not the best, but can be a solution.
if($(/*query*/).parent().is('table')){}
or if it's not a direct child
if($(target).parents('table').length > 0) {
//do something...
}
You can use the jquery.parents() function to retrieve the closest parent of a given selection:
$(myElemToDelete).parents('tr').remove();
There are several good answers on how to accomplish what you want, but I wonder about the initial premise... could you pass the id of the container to the function?
<li id="li_0">Some content <span class="delete" onclick="deleteRow('li_0')">Delete</span></li>
This would give your function flexibility to work in any structure. But, I don't know if that would really work for what you're wanting.
First,check whether the parent exist or not.
If it does,then check whether its input/tr or whatever element you want to delete and then remove.
if ($(event.target).parent('.selector').size() > 0)
{
$("#elementId").is("input")//or tr or whatever!!!
{
//your removal code
}
}
Some generated output can be as follows:
<div class="fivecol"></div>
<div class="sevencol">content</div>
if the div.fivecol is empty, I want to remove it and change the div.sevencol to a div.twelvecol
$('.fivecol').each(function() {
if ($(this).html() ==''){
$(this).remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
doesn't do the trick. Any ideas?
$('.fivecol:empty + .sevencol').toggleClass('sevencol twelvecol')
.prev()
.remove();
DEMO: http://jsfiddle.net/JY9NN/
$('.fivecol').each(function(i, div) {
if (!div.html().trim()) {
div.remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
basically I just fixed some syntax errors, and changed the this reference to the proper argument call. Let me know how that works.
Best,
-Brian
Try this,
$(function () {
$('.fivecol').each(function() {
if ($(this).html() =='') {
$(this).remove();
$('.sevencol').each(function(){
$(this).attr('class','twelvecol');
});
}
});
});
We could use a couple fancy selector tricks:
$(".fivecol:empty + .sevencol").attr("class", function(){
return $(this).prev().remove(), "twelvecol";
});
As you can probably guess, .fivecol:empty attempts to find an empty element with the class fivecol. It then proceeds to grab the sibling element, using +, which has the class .sevencol.
Once we have our .sevencol element, we set out to change its class value to twelvecol. Since we're in this function, we know that .fivecol:empty was found, so we can safely remove it. Lastly, we simply return the new class value to be assigned in the place of sevencol.
Demo: http://jsfiddle.net/cLcVh/1/