how to check div is last child from parent div - javascript

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

Swap two items on clicks

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.

Jquery hasClass issue

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

Remove parent div when page load?

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

Is there a way to know if the element is inside a table or a list?

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

If div is empty, remove it and change class of next div

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/

Categories