Jquery - contains method returning unexpected results - javascript

The esample is here: http://jsfiddle.net/SsPqS/
I have a div with class="record" I add a click function to every object with class"record". in the click function I have this:(simplified)
$(".record").click(function(e) {
if (!$(e.target).is(':button')) {
if ($.contains($(this).parents(".parentDiv"), $("#UserInformation"))) {
alert("true");
} else {
alert("false");
}
}
});
I keep getting the true alert, but i'm not sure why becaue #UserInformation is certinly not in the div with class "parrentDiv"
Am i using the contains function wrong?
Thanks!

$.contains() is intended to take DOM elements, like this:
if ($.contains($(this).closest(".parentDiv")[0], $("#UserInformation")[0])) {
You can test the updated demo here.

I think you should use the has() method
$(".record").click(function(e) {
if (!$(e.target).is(':button')) {
if ($(this).closest(".parentDiv").has("#UserInformation").length) {
alert("true");
}
else {
alert("false");
}
}
});
http://api.jquery.com/has-selector/
Description: Selects elements which contain at least one element that matches the specified selector.

Related

Showing value in form fields if class exists

When the form fields are inputted and submitted (#submit_btn) correctly my values disappear. When they are not valid this doesn't happen. I have tried fixing this with jQuery:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok") === true) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
but it is not working.
Edit: #register is parent and .wpcf7-mail-sent-ok is child
Any ideas?
From what I understood this should work for you:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok")) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
checking $("#register .wpcf7-mail-sent-ok") with true will not work as it is a dom object which is truth-sy but not strictly same as true
Try this:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok").length) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
This is the "proper" way of checking if element exists.
No need for using " > 0" or "==="
$('#submit_btn').click(function() {
if($("#register").hasClass("wpcf7-mail-sent-ok") {
$('#name-007').show();
$('#email-007').show();
$('#phone-007').show();
}
});

jQuery virtual id?

Is there something in jQuery to uniquely identify a DOM node, if the HTML markup does not provide an id, i.e. if $(NODE).attr("id") returns undefined?
Goal: exclude a specific node of a specific class.
jQuery(document).ready(function($){
$(".accordion-right-content").hide();
$(".article-image img").click(function() {
$(".accordion-right-content").each(function(i,v) {
// the following comparison does not work because of the missing ID
if ($(v).attr("id") !== $(this).parent().parent().children(".accordion-right-content").attr("id")) {
$(v).hide();
} else {
$(v).show();
}
});
});
Except the specific $(this).parent().parent().children(".accordion-right-content") to be hidden before shown again.
You should use not operator like this:
if (!$(NODE).attr("id")){
//do stuff here
}
And the following, you're having wrong:
if ($(v).attr("id") !== $(this).parent().parent().children(".accordion-right-content").attr("id")) {
Should be this:
if ($(this).attr("id") !== $(this).parent().parent().children(".accordion-right-content").attr("id")) {

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/

If statement not triggering alert box

I am trying to create a if statement that triggers a alert box if there is text in the div.
My Jsfiddle: http://jsfiddle.net/D7cPT/21/
My HTML:
<div id="post-preview">aasasdasd</div>
MY JQUERY:
$(document).ready(function() {
// Bind it to some action.
if{$('#post_body_html').html();) {
alert('asdasda');
}
});
OH DEAR GOD:
//why is there a bracket after the if and a semicolon in there?
if{$('#post_body_html').html();) {
How about:
//change if{ to if( and remove semicolon
if($('#post_body_html').html()) {
Also your selector doesn't match the ID of your element. Change #post_body_html to #post-preview
jsFiddle
Edit:
To those who land here later on, a better way to accomplish the same test is written:
if($('#post_body_html')[0].childNodes.length) {
instead.
Try this ->
$(document).ready(function() {
// Bind it to some action.
if($('#post-preview').html()) { // wrong ID and wrong syntax
alert('asdasda');
}
});
Working demo : http://jsfiddle.net/manseuk/D7cPT/25/
You have MANY problems:
It should be post-preview, not #post_body_html
You have if { instead of if (
You end your if statement with a semi-colon? Huh?
html() doesn't return a bool, it returns a string.
Try this:
$(document).ready(function() {
// Bind it to some action.
if ($('#post-preview').html().length > 0) {
alert('asdasda');
}
});
You should remove the ;
$(document).ready(function() {
// Bind it to some action.
if{$('#post_body_html').html()) { //line changed
alert('asdasda');
}
});

Categories