Develop Reference

JQuery - Perform a "find()" excluding certain elements and their descendants

QUESTION:
Perform a "find()" excluding certain elements and their descendants.
REAL CASE:
Code Sample
The purpose of the code below is try to select all elements within $("#lbr_placehld"), but exclude all those that have the attribute lbr_mval_placehld and its descendants.
$("#lbr_placehld").find(":not([lbr_mval_placehld])");
HTML sample
<span id="lbr_placehld" lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_bases_n_forms#1">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome da Base</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_base" name="mg_bases_n_forms#1.str_id_base" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome da Base" lbr_mval_fld_nm="str_nm_base" name="mg_bases_n_forms#1.str_nm_base" type="text" autocomplete="off" lbr_fdly_nm="Nome da Base 2">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
<div lbr_mval_container="" class="widget-box transparent">
<div class="widget-header widget-header-small">
<h6 class="smaller"></h6>
<div class="widget-toolbar">
<a href="#" title="Remover último item" class="lbr-tooltip" lbr_mval_op="rmlast" onclick="lbrad_MultivaluedManipulate(this);return false;" style="display: inline;">
<i class="fa fa-remove red border-icon"></i>
</a>
<a href="#" class="lbr-tooltip" lbr_mval_op="add" onclick="lbrad_MultivaluedManipulate(this);return false;" title="Adicionar item">
<i class="fa fa-plus blue border-icon"></i>
</a>
<a href="#" title="Remover todos itens" class="lbr-tooltip" lbr_mval_op="rmall" onclick="lbrad_MultivaluedManipulate(this);return false;" style="display:none;">
<i class="fa fa-remove red border-icon"></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-main">
<span lbr_mval_grp_path="mg_forms" lbr_mval_last_idx="3">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_bases_n_forms#1.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_bases_n_forms#1.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 2">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#0">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#0.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#0.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 1">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#1">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#1.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#1.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 2">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#2">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#2.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#2.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 3">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
<span lbr_mval_placehld="" lbr_mval_phld_grp_path="mg_forms#3">
<div class="form-group">
<label class="col-xs-2 control-label no-padding-right" for="for_str_nm_base">Nome do Form</label>
<div class="col-xs-10">
<div class="clearfix">
<input lbr_mval_fld_nm="str_id_form" name="mg_forms#3.str_id_form" type="hidden">
<input class="col-xs-5" lbr_invalidat_msg="" lbr_mval_fld_fdly_nm="Nome do Form" lbr_mval_fld_nm="str_nm_form" name="mg_forms#3.str_nm_form" type="text" autocomplete="off" lbr_fdly_nm="Nome do Form 4">
<a href="#" title="Remover este item" class="lbr-tooltip" lbr_mval_op="rmthis" onclick="lbrad_MultivaluedManipulate(this);return false;">
<i class="fa fa-remove red field-border-icon"></i>
</a>
</div>
</div>
</div>
<hr>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</span>

var $topElement = $("#lbr_placehld");
// find every nested element
$topElement.find('*')
// filter out any element that has the attribute,
// or is a descendant of an element that has the attribute.
// EXCLUDE the top element from the attribute check
.filter(function(){
return $(this).closest('[lbr_mval_placehld]').not($topElement).length === 0;
});

A more elaborate approach using #Taplar's "core" ideia.
For more explanation see the code notes below...
// NOTE: Make a JQuery find excluding certain elements and their descendants. By Questor
// . jqPntElOrPntQry - Ancestor over which a ".find()" will be executed using the
// "string" in jqFind. If it is a string then execute it as a JQuery query to define
// the ancestor. Not being a string and not being undefined then it will be the defined
// ancestor (resulting from a JQuery query). If it is undefined then execute the string
// in jqFind as a JQuery query to define the ancestor;
// . jqFind - Perform as a JQuery query on a ".find()" on the ancestor jqPntElOrPntQry.
// When jqPntElOrPntQry is undefined then, simplistically, execute the string in jqFind
// as a JQuery query for the elements you want to find excluding the elements that
// match jqExcl JQuery query and their descendants;
// . jqExcl - A JQuery query that matches the elements you want to exclude along with
// their descendants.
function findExclElmtsNDesc(jqPntElOrPntQry, jqFind, jqExcl){
// NOTE: The approach below makes a filter excluding all elements found in jqExcl
// JQuery query and their children, but excludes from that filter the "parent"
// element (jqElInst/jqFind) if it is also found in jqExcl jqExcl query. By Questor
// [Ref.: https://stackoverflow.com/a/58402312/3223785 ]
var fExclElmtsNDescRtn;
if (typeof jqPntElOrPntQry === "string" ||
jqPntElOrPntQry instanceof String) {
// [Ref.: https://stackoverflow.com/a/9436948/3223785 ]
jqPntElOrPntQry = $(jqPntElOrPntQry);
fExclElmtsNDescRtn = jqPntElOrPntQry.find(jqFind);
} else if (typeof jqPntElOrPntQry !== "undefined") {
fExclElmtsNDescRtn = jqPntElOrPntQry.find(jqFind);
} else {
// [Ref.: https://stackoverflow.com/a/16975373/3223785 ]
fExclElmtsNDescRtn = jqPntElOrPntQry = $(jqFind);
}
// NOTE: Find every nested element. By Taplar
fExclElmtsNDescRtn = fExclElmtsNDescRtn
// NOTE: Filter out any element that has the attribute, or is a descendant
// of an element that has the attribute. EXCLUDE the target element from the
// check. By Taplar and Questor
.filter(function(){
return $(this).closest(jqExcl).not(jqPntElOrPntQry).length === 0;
});
return fExclElmtsNDescRtn;
}
Thanks! =D

daterangepicker close parent Bootstrap dropdown

I have a dropdown menu in Bootstrap with a daterangepicker input.
I have this code
$(document).on('click', 'body .dropdown-menu', function (e) {
e.stopPropagation();
});
$('#filter-expired-range').daterangepicker();
and when i click on daterangepicker calendar day input- everything is close (daterangepicker calendar and dropdown menu)
Update 1.
html code :
<div class="btn-group mea-filters-block">
<span style="float: left; padding-top: 12px;" class="mea-info"></span>
<button type="button" class="btn dropdown-toggle btn-filter btn-link" data-toggle="dropdown"
title="Filter">
<i class="fa fa-filter"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<form id="docExportFilter">
<div class="row">
<div class="col-sm-6" style="border-right: 1px solid #ddd">
<p class="filterslabel"><i
class="fa fa-calendar-check-o"></i>
<span>Validation date</span>
</p>
<div class="form-group">
<input type="checkbox" class="" name="validDocuments" id="filter-valid">
<label for="filter-valid">Valid documents</label>
</div>
<div class="form-group">
<input type="checkbox" class="" name="expired" id="filter-expired">
<label for="filter-valid">Expired documents</label>
</div>
<div class="form-group" id="filter_expired_range_container" style="display: none">
<label for="filter-expired">Expired between dates
<input style="width: 100%" readonly placeholder="Any" type="text"
class="form-control" name="expired_range" id="filter-expired-range">
</label>
</div>
</div>
<div class="col-sm-6">
<p class="filterslabel"><i
class="icon-checkmark-circle2"></i> <span>Compliance</span>
</p>
<div class="form-group">
<input type="checkbox" name="compliant" class="" id="filter-compilant">
<label for="filter-compilant">Compliant documents</label>
</div>
<div class="form-group">
<input type="checkbox" name="remedialActionsRequired" class="" id="filter-remedial">
<label for="filter-remedial">Remedial required</label>
</div>
</div>
</div>
<div class="row pt-15" style="border-top: 1px solid #ddd">
<div class="col-sm-12 text-right">
<a class="mea-submit btn btn-primary"><i class="fa fa-check"></i>Apply</a>
<button class="btn btn-default" type="reset"><i class="fa fa-times"></i> Cancel</button>
</div>
</div>
</form>
</ul>
</div>
UPDATE 2.
Here is minimal example - i see problem is requirejs - if i test it without requirejs - it work ...
example with requirejs (don't work - select date close parent dropdown)
https://jsfiddle.net/5wtLqxk9/2/
example without requirejs (work fine)
https://jsfiddle.net/5wtLqxk9/1/

$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
Note: place after daterangepicker()
https://jsfiddle.net/5wtLqxk9/4/
Similar to:
event bubbling in Jquery datepicker

This works for me.
$('#your-id-here').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}).click(function(e) {
$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
});

If Child Category checkbox Selected Then Parent checkbox Should be selected Automatically

I have nested Loop For Parent And Child Category,
Now I want If My Child Is selected Then All Parent Of that Child Category Should Be Selected Automatically.
In My code Only One Parent is checked , So how can i do it.
And also If i Uncheck Child Then, Parent Should Be uncheck Automatically
So is that possible.
Thanks in advance.
Here Is My code,
<label>Product Category:</label>
<div class="wk_field wk_category">
<div class="wk_for_validation">
<div id="wk_category_label">CATEGORIES</div>
<div class="wk_cat_container" style="margin-left:0px;">
<span class="wk_minus"> </span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gold</span>
<input class="wk_elements" type="checkbox" value="3" name="category[]" id="3">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Earrings</span>
<input class="wk_elements" type="checkbox" value="27" name="category[]" onclick="checkParent('3', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_minusend"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Rings</span>
<input class="wk_elements" type="checkbox" value="26" name="category[]" onclick="checkParent('3', this)" id="26">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;" >
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Ladies</span>
<input class="wk_elements" type="checkbox" value="37" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 40px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Gents</span>
<input class="wk_elements" type="checkbox" value="36" name="category[]" onclick="checkParent('26', this)">
</div>
<div class="wk_removable wk_cat_container" style="margin-left: 20px;">
<span class="wk_no"></span>
<span class="wk_foldersign"></span>
<span class="wk_elements wk_cat_name">Bangles</span>
<input class="wk_elements" type="checkbox" value="25" name="category[]" onclick="checkParent('3', this)">
</div>
<script type="text/javascript">
function checkParent(id, ele) {
var parent = document.getElementById(id);
if (ele.checked === true) parent.checked = true;
}
</script>

if I got it right when a child is checked you wanted its parent to be checked, and its parent's parent, and so on till root.
If so, check this fiddle I created.
I removed inline event handlers (onclick), associated a data-parent attribute to each child, and used the attribute to go up the tree in the following reviewed checkParent function:
function checkParent(ele) {
var idparent = ele.getAttribute('data-parent');
if(idparent){
var parent = document.getElementById(idparent);
if (ele.checked === true) parent.checked = true;
checkParent(parent);
}
}
Also, I didn't understand how exactly you wanted child uncheck event to work, you can try and play with jsfiddle to get that, or point it out more clearly to have further help.

Show and hide div on check and uncheck of checkbox

I want to hide and show div on check and uncheck of checkbox. I am getting the parent and finding the div which I want to hide. But code is not running
Jquery is:
$('.show-check').click(function() {
if (this.checked) {
$(this).parent().find('.div-check').fadeIn('slow');
} else
$(this).parent().find('.div-check').fadeOut('slow');
});
HTML:
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>

Why your code does not work :
$(this).parent() will give you label - and find('.div-check') won't return anything.
Use closest() - to get a common parent which has the desired child element,
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
Also, I'd suggest you use change() event instead of click() on checkbox in the below,
$('.show-check').click(function() {

Use this script instead
$('.show-check').click(function() {
if ($(this).prop('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>

Use $('input').is(':checked')
In your example: $(this).is(':checked')
You have to use parents() to select the correct wrapper to find your element div-check
var $check = $(this).parents('.type-details').find('.div-check');
$('.show-check').click(function() {
if ($(this).is(':checked')) {
$check.fadeIn('slow');
} else
$check.fadeOut('slow');
});

Use $(this).closest(".type-details").find('.div-check') to get the div-check div and hide/show it.
$('.show-check').click(function() {
if (this.checked) {
$(this).closest(".type-details").find('.div-check').fadeIn('slow');
} else {
$(this).closest(".type-details").find('.div-check').fadeOut('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
<span class="form-label">Logo:</span>
<div class="switch">
<label>
<input type="checkbox" class="show-check" checked>
<span class="lever"></span>
</label>
</div>
<div class="landing-inputfile div-check">
<div class="col-xs-12 no-padding">
<div class="input-group">
<input type="text" class="file-input" placeholder="No file" readonly>
<label class="input-group-btn">
<span class="btn btn-default btn-flat btn-basic2">
UPLOAD <input type="file" style="display: none;">
</span>
</label>
</div>
</div>
</div>
</div>

$('.show-check').click(function() {
if ($(this).is(":checked")) {
$(this).closest('.type-details').find('.div-check').fadeIn('slow');
} else
$(this).closest('.type-details').find('.div-check').fadeOut('slow');
});

Try this code :
$('.show-check').click(function() {
$(this).toggleClass('checked unchecked');
if ($(this).hasClass('checked')) {
$(this).parents('.type-details').find('.div-check').fadeIn('slow');
} else {
$(this).parents('.type-details').find('.div-check').fadeOut('slow');
}
});
<input type="checkbox" class="show-check checked" checked>

jQuery .on() issue, console.log() works but element interaction doesn't

I am using this code inside $(document).ready(function(){ ... }):
$('#flavours').on('click', '.toggle-quantity', function(e){
e.preventDefault();
var $quantity_percent = $(this).parent().find('.quantity_percent');
if($quantity_percent.is(':hidden')){
console.log("is hidden");
$quantity_percent.show();
}else{
console.log("is not hidden");
$quantity_percent.hide();
}
});
What's happening is the console.log() is working, but the $quantity_percent is not showing/hiding.
Additionally, if I add an alert('test') to the beginning of the function (just after e.preventDefault) this also doesn't work, but the console.log() continues to work (it correctly logs 'is not hidden').
EDIT: Relevant HTML markup:
<div id="flavours">
<div class="row flavour" id="flavour_1" style="display: block;">
<div class="form-group">
<div class="col-xs-12">
<fieldset>
<legend>Flavour 1</legend>
<div class="col-sm-4">
<label>Flavour Name</label>
<input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
<input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
<p class="flavour_info"></p>
</div>
<div class="col-sm-6">
<label>Flavour Quantity <span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</label>
<div class="input-group" id="quantity_percent">
<input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
<span class="input-group-addon">%</span>
</div>
<div class="input-group" id="quantity_drops" style="display: none;">
<input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
<span class="input-group-addon">drops/ml</span>
</div>
<p class="flavour_recommended_percentage"></p>
</div>
<div class="col-sm-2">
<label> </label>
<button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</fieldset>
</div>
</div>
</div>

$(this).parent() is a label element which doesn't have a child with .quantity_percent
Also quantity_percent is an id and not a class. Use the ID selector
So use
var $quantity_percent = $('#quantity_percent');
instead of
var $quantity_percent = $(this).parent().find('.quantity_percent');
Note: IDs must be unique in HTML
EDIT: as per OPs comments
I updated it to a class rather than ID (as it's on a dynamically growing list)
Usage
var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');

The .parent() targets the <label> therefore it can't find .quantity_percent