I have a series of dynamic divs like these
<div id="my_unique_div">
<div>
<input type='checkbox'></input><label>Label 1</label><label><span class="unique">Text 1</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 2</label>
</div>
<div>
<input type='checkbox'></input><label>Label 3</label><label><span class="unique">Text 3</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 4</label><label><span class="unique">Text 4</span></label>
</div>
</div>
I would like to set the display of all the divs that do not contain a span with class="unique" to "none" with jQuery but not sure what selector to use to grab them.
That would leave only the 2nd div above visible and hide the 1st, 3rd and 4th.
My answer loops all of the divs under #my_unique_div and looks for .unique objects and if none, add a class that sets the display to none.
$("#my_unique_div div").each(function() {
if ($(this).find(".unique").length === 0) {
$(this).addClass("hide");
}
});
.hide {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my_unique_div">
<div>
<input type='checkbox'></input><label>Label 1</label><label><span class="unique">Text 1</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 2</label>
</div>
<div>
<input type='checkbox'></input><label>Label 3</label><label><span class="unique">Text 3</span></label>
</div>
<div>
<input type='checkbox'></input><label>Label 4</label><label><span class="unique">Text 4</span></label>
</div>
</div>
Related
I hope you can see what I'm trying to do here.
I am trying to keep the same structure for the divs but clicking the select all in the top area only selects those 3 and the bottom select all only selects the bottom 3.
Obviously there are better ways to do this but I have stripped my code back to this basic example.
please help me rewrite this line:
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
So i can use the profile-id data attribute to select the checkboxes that fall inside that div.
Thanks
$('.profile #select_all_cb').click(function() {
var profileID = $(this).closest('.profile').data('profile-id');
if($(this).is(":checked")) {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
$(this).prop('checked', true);
});
} else {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() { //Check all boxes
$(this).prop('checked', false);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
IDs are unique, so changed id="select_all_cb" to class="select_all_cb".
On click .select_all_cb, goes up and finds .profile parent, store the checkbox value as boolean in isChecked variable, and finds all .score_alert_cb1 checkboxes within the current .profile element.
$(".profile .select_all_cb").click(function() {
var profile = $(this).closest(".profile");
// var profileID = profile.data('profile-id');
var isChecked = $(this).is(":checked");
profile.find(".score_alert_cb1").prop("checked", isChecked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
What's wrong with
$("div").find("[data-profile-id='"+profileID+"']").find("[type=checkbox]")each(...}
?
I need some help I have a drupal webform in which new form elements show conditionally if the previous text input has content.
What I’m trying to do is select all inputs that are currently visible and then specifically target the last one (the most recently shown).
The issue is this targets the last child within each .form-item rather than the last form item itself directly.
$(".webform").on("change", function() {
$(".form-item:visible").each(function() {
if ($(this).is(":last-of-type")) {
//Do whatever
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webform">
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:none">
</div>
</div>
You can simplify your flow by using this jQuery:last selector
$('.form-item:visible:last')
You may apply the below code on form field change or form submit, depending on your requirements.
<div class="webform">
<div class="form-item" style="display:block">
<input type="text" value="1" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="2" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="3" />
</div>
<div class="form-item" style="display:none">
<input type="text" value="4" />
</div>
</div>
<script>alert($(".form-item:visible:last input").val());</script>
This question already has answers here:
Why doesn't this CSS :not() declaration filter down?
(3 answers)
Closed 6 years ago.
I'm trying to select all inputs except the inputs inside some div.class. I do not know why it does not work correctly. My structure looks something like below. And why selector :not not work. And what can I do to exclude all inputs from the "exclude" div. Because i want only select inputs: i1,i2.
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
$('input').not('.exclude *')
or
$('input:not(.exclude *)')
These will grab all inputs which are not descendants of elements with the exclude class. You can get more specific on which inputs (maybe only the ones under a certain div or class) but this should get you the exclusion you're looking for.
You can see a working example here
In your HTML structure:
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
each <input> is inside at least one <div> that does not have the class "exclude". Therefore your selector is working but it's not getting the result you want.
Instead, qualify the inputs selected the simple way:
console.log($("div input:not(.exclude *)").length);)
That selector will first select all of the <input> elements (well the ones inside <div> elements), but then exclude all of <input> elements that have an element with class "exclude" somewhere above them in the DOM.
If the original qualifier of being inside some <div> isn't really important, then all you need is "input:not(.exclude *)".
I marked inside your HTML the div that is not with the exclude class, and this is why you got 4 inputs on your console.log($("div:not(.exclude) input").length);
You can filter out the inputs that have parents with the exclude class:
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
console.log($("input").filter(function() { return $(this).parents('.exclude').length > 0}).length);
$("input").filter(function() { return $(this).parents('.exclude').length > 0}).css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div> <!-- This div is not with the class explude -->
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
Take this:
console.log($("div.table.exclude input").length);
console.log($("div.table:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1" class="table">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="table exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
Problem: there are inner divs which does not have the class and they satisfy the selector too.
Solution: Add another class to the divs which you want to be part of your selector and then use this new class too .. Like
<div id="tab1" class="tabs"> And
<div id="tab2" class="tabs exclude">
And then change script to
$("div.tabs:not(.exclude) input")
I want to show / hide divs based on check box selection.
here is the scenario,
I have two check box in a div named decider,
selecting check box one should show Div box-one
selecting check box two should show Div box-two
Once someone has made the selection, i want the decider div to hide. I am not being able to make this work
$(function() {
$('.decider').removeClass('hide');
$('.box-one').addClass('hide');
$("#optionTwo").click(function() {
$('#optionOne').attr("checked",false);
});
$("#optionOne").click(function() {
$('#optionTwo').attr("checked",false);
});
$("#send-decide").click(function() {
if($('#optionTwo').is(':checked')){
$('.decider ').addClass('hide');
$('.box-one').removeClass('hide');
}
if($('#optionOne').is(':checked')){
$('.decider ').addClass('hide');
$('.box-two').removeClass('hide');
}
});
});
<div class="decider hide">
<p style="font-size:10px;color:#000;">Please select an option below</p>
<label class="checkbox">
<input id="optionTwo" type="checkbox" name="Request" value="Request" />
Select Box one </label>
<label class="checkbox">
<input id="optionOne" type="checkbox" name="Download" value="Download" />
Select Box two </label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span> </div>
<div class="box-one">
<p>this is first box</p>
</div>
<div class="box-two hide">
<p>this is second box</p>
</div>
You are missing .hide class display:none property css.. Rest everything is fine
$(function() {
$('.decider').removeClass('hide');
$('.box-one,.box-two').addClass('hide');//add hide to both the class
$("#optionTwo").click(function() {
$('#optionOne').attr("checked",false);
});
$("#optionOne").click(function() {
$('#optionTwo').attr("checked",false);
});
$("#send-decide").click(function() {
if($('input[type="checkbox"]:checked').length)//check whether any checkbox is checked
{
//if yes go ahead and do what you wanted to do
$('.decider ').addClass('hide'); //hide it in any case
if($('#optionTwo').is(':checked')){
$('.box-one').removeClass('hide');
}
if($('#optionOne').is(':checked')){
$('.box-two').removeClass('hide');
}
}
else
alert('select a checkbox');//if not display some message to user
});
});
.hide{
display:none; //add this property
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="decider hide">
<p style="font-size:10px;color:#000;">Please select an option below</p>
<label class="checkbox">
<input id="optionTwo" type="checkbox" name="Request" value="Request" />
Select Box one </label>
<label class="checkbox">
<input id="optionOne" type="checkbox" name="Download" value="Download" />
Select Box two </label>
<br />
<span class="select">
<input type="button" id="send-decide" alt="submit" value="select" />
</span> </div>
<div class="box-one">
<p>this is first box</p>
</div>
<div class="box-two">
<p>this is second box</p>
</div>
Consider the following HTML
I am trying to wrap the child elements (label/input) where the label text says 'This one'. Basically, I need to select the full elements without class partial if they contain input text elements and not number uinput elements. One the full elements are selected, their children elements need to be completely wrapped entirely with <div class="wrapped"></div>
<div class="group">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
<input type="number"/>
</div>
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="number"/>
</div>
</div>
Like this:
<div class="wrapped">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
</div>
You could use a combination of the :not()/:has() selectors to select the desired .full elements. Iterate over the selected elements, and wrap the children elements using a combination of the methods .children()/.wrapAll():
Example Here
$('.group .full:not(.partial):has(input[type="text"])').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
Alternatively, you could also use the following:
Example Here
$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
I'm not sure where approach is faster.. probably the first one.