Right now I have a a bootstrap row set up with a checkbox and input inside of it.
<div class="row">
<div class="AdminFees">
<div class="col-md-2"><input type="checkbox" class="make-switch feeswitch" data-on-color="info" data-off-color="info" data-on-text="Yes" data-off-text="No" name="HasPerMemberFee" checked="#Model.Contract.HasPerMemberFee" /></div>
</div>
<div class="col-md-2"><input type="text" class="form-control" placeholder="$0.00" id="PerMemberFeeAmount" name="PerMemberFeeAmount" value="#Model.Contract.PerMemberFeeAmount" /></div>
I have 6 or 7 very identical field pairs that I am manipulating generically so I don't have to make multiple functions. I am having trouble figuring out how to reference the text input element from the checkbox element.
Jquery:
$('.feeswitch').each(function () {
$(this).on('switchChange.bootstrapSwitch', function () {
if ($(this).bootstrapSwitch('state') == true)
$(this).next('input').css('visibility', 'visible');
else
$(this).next('input').css('visibility', 'hidden');
});
});
I have tried next and nextAll, but to my understanding, those only find child elements. I need to know how to select the child of the second adjacent parent element.
In an attempt to simplify the situation:
The checkbox has 2 parents, the two divs, and 1 adjacent element, the other div column. I need to access the child of that other div column, but it needs to be generically so I don't need to make 8 functions for each checkbox/input pair on my page.
I'm not sure I agree that the accepted solutions is stable, since it's selector greatly depends on keeping your structure the same, which I would suggest is unlikely in most projects. If I might suggest an alternative, I think the better method here is to employ the scope parameter of the selector.
$('.feeswitch').on('switchChange.bootstrapSwitch', function () {
var switchState = $(this).bootstrapSwitch('state') ? "visible" : "hidden";
$('input',$(this).closest('.row')).not($(this)).css('visibility', switchState);
});
Regardless, you should definitely look more in to jQuery DOM traversal methods, as that's pretty much the big magic of jQuery:
https://api.jquery.com/category/traversing/
You'll want to say something like:
$(this).parent().parent().next('div').find('input').
css('visibility', 'visible');
And since this is generic, you don't need the each():
$('.feeswitch').on('switchChange.bootstrapSwitch',
function () {
var visi = $(this).bootstrapSwitch('state') ? 'visible' : 'hidden';
$(this).parent().parent().next('div').find('input').
css('visibility', visi);
}
);
Related
I am developing a game that glitches at some point through using the CSS filter: invert(1); property. However, when you use that property on body, it makes everything position: absolute;. This is not good because I need most elements to be fixed, and everything goes to a negative top and not visible. How can I effectively get all elements in a list that isn't a parent to any other elements, but included if it has text? Any answers or other stack overflow topics would be nice!
Here is some of my code:
// In a working loop called Repeat()
if(Glitch == 1) {
document.querySelector(".ChangableStyles").innerHTML = "* {filter: invert(1)}"
} else {
document.querySelector(".ChangableStyles").innerHTML = ""
}
Edit: Since all of you are asking, the .ChangableStyles tag is a style element. The filter on everything applies when I change the innerHTML of that style tag to valid CSS styles. I don't want to be rude, but I have the .ChangableStyles thing figured out. Thank you.
You mention you already have a list of elements, but it's not clear how you're generating that list. I've gone ahead on the assumption you're wanting to "select" all elements in <body></body> that don't have any children.
You can use a combination of Array.from(), your pre-existing selection logic, and a filter() using node.childElementCount === 0 to accomplish what you describe. However on higher-complexity DOMs this will be computationally expensive, so I would implore you to re-consider your design instead of opting for this route. To be clear, this will meet your requirement of selecting ANY Node in the DOM which has no child elements ("isn't a parent to any other elements"), which includes any script, style or other "user-invisible" nodes in the body.
document.getElementById('get-elements-button').addEventListener('click', function () {
console.log(Array.from(document.body.getElementsByTagName("*")).filter(function (node) {
return node.childElementCount === 0;
}));
});
<div class="has-child-elements">
This is a child element
</div>
<div class="has-no-child-elements">
</div>
<div class="has-child-elements">
This is also a child element
</div>
<button id='get-elements-button'>Get elements with child elements →</button>
I have a problem detecting a visibility state of checkbox and I would like to ask you for a help.
I have a dynamicaly loaded part of the page, which looks like:
<div id="box">
<div class="colored">
<input type="checkbox" value="f01" name="mycheckbox">
<!-- some content -->
<div>
<div class="colored">
<input type="checkbox" value="f02" name="mycheckbox">
<!-- some content -->
<div>
<!-- .... -->
</div>
This represents, shall we say, items in some gallery. Every class="colored" div can be VISIBLE or HIDDEN.
Lets say, it is the simple filter, like I want to have visible only class="colored yellow" divs
And now the core of the problem:
I need to loop through whole BOX element, find all checkboxes and by each checkbox, "ask him", if it is visible, and if true, check him.
Unforunately, this doesn't work:
function checkallfav() {
$("#box").find('input[type=checkbox]').each(function () {
if (this.is(":visible")) {
this.checked = true;
}
});
}
//And this doesn't work as well
function checkallfav() {
$("#box").find('input[type=checkbox]').is(":visible").each(function () {
this.checked = true;
});
}
The problem is, that the FIND function returns the whole element, I tried
Console.debug(this); and in firebug, the response was all html element
So, please, anyone has a solution?
Use :visible selector on checkbox itself. Using :visible on selector will filter out only visible elements and then prop can be directly used on those checkboxes.
$("#box").find('input[type=checkbox]:visible').prop('checked', true);
The code can also be shorten as
$('#box :checkbox:visible').prop('checked', true);
Here this refers to native DOM object and they don't have .is() function its a jQuery function thus have to use with jQuery object. Thus $(this).is(":visible") should be used.
$("#box").find('input[type=checkbox]').each(function () {
if ($(this).is(":visible")) {
this.checked = true;
}
});
A simpler way to achieve is by using #Tushar's recommendation
You could use prop() function parameter too:
$("#box").find(':checkbox').prop('checked',function(){
return $(this).is(':visible');
});
This would by the way uncheck any hidden checkbox (if needed).
This can be achieved with .filter() method:
$("#box").find('input[type=checkbox]').filter(':visible').prop('checked', true);
I have multiple containers that I need to animate.
Basically: you click on class: box-n (e.g. box-1) and you slideToggle: box-child-n (e.g. box-child-1).
Instead of a click function for every box-n to toggle box-child-n, I want a simple line of code that matches box-n with its children class.
html:
<div class="box-1">Some clickable container</div>
<div class="box-child-1">This should toggle when box-1 is clicked</div>
<div class="box-2">Some clickable container</div>
<div class="box-child-2">This should toggle when box-2 is clicked</div>
Et cetera...
current jquery:
$('.box-1').click(function() { $('.box-child-1').slideToggle() });
$('.box-2').click(function() { $('.box-child-2').slideToggle() });
Sort of desired jquery (allInt function is made up.):
var $n = allInt();
$('.box-' + n).click(function() {
$('.box-child-' + _n).slidetoggle() // local variable to inter alia .box-1
})
I can't seem to think of any solution, so I am asking for help once again.
I appreciate every suggestion you folks give me!
Here's one way to do it that allows for the elements to have other classes besides the ones that you're using to pair them up:
$('div[class*="box-"]').click(function() {
var c = this.className.match(/\bbox-\d+\b/);
if (c)
$('div.' + c[0].replace(/-/, '-child-')).slideToggle();
});
Demo: http://jsfiddle.net/6xM47/
That is, use the [name*=value] attribute contains selector to find any divs with a class attribute that has "box-" in it somewhere. Then when clicked extract the actual class and check that it matches the "box-n" pattern - this allows for multiple (unrelated) classes on the element. If it does match, find the associated "box-child-n" element and toggle it.
Having said all that, I'd suggest structuring the markup more like this:
<div data-child="box-child-1">Some clickable container</div>
<div class="box-child-1">This should toggle when box-1 is clicked</div>
...because then the JS is simple and direct:
$('div[data-child]').click(function() {
$('div.' + $(this).attr('data-child')).slideToggle();
});
Demo: http://jsfiddle.net/6xM47/1/
To just answer your question, this will do the trick :
$("div[class^='box-']").click(function(){
$(this).parent().find('.' + $(this).attr('class').replace('-','-child-') ).slideToggle();
});
jsfiddle here.
Anyway i dont think you use a good approach (you may wrap child into parent div or use ids).
I feel like this could have been asked before, but I can't seem to find it, so I'll ask myself.
I want to select the parent element that is the "cause" of its children being hidden. For example, a group of elements are essentially "hidden" but not because they have display:none but because some parent along the way has display:none.
If I only have a child element and I know that it is hidden, how might I easily find the parent that is causing it to be hidden.
I realize one solution is just to recursively loop through the parents such as...
function findHiddenParent(el){
var $el = $(el);
if($el.css('display') == 'none'){
return $el;
}
return findHiddenParent($el.parent());
}
Note I haven't tested the above code, its just for conceptualizing a solution
But is there an easier way, perhaps through some selector magic?
You can use .parents() then filter that to the last element that is hidden.
$(child).parents(":hidden").last().show();
it will select the parent element highest in the hierarchy that has display: none
Demo: http://jsfiddle.net/X9W2v/
Note, :hidden will also select elements with a width/height of 0.
Here's something similar to what you've got:
function findHiddenParents ( el ) {
return $(el).parents().filter(function () {
return $(this).css('display') == 'none';
});
}
This'll return all ancestors that are hidden. If you only want the closest or the farthest, you can just return it with .first() or .last() respectively.
If you're not actually interested in which elements are hidden, but just want to reveal them all, then you can't get any simpler than this:
$(el).parents().show()
This is how I would do it in plain JavaScript. Somehow I feel it's cleaner than the jQuery solutions that involve loops or callbacks (Kevin B's one-liner looks great!). The cons are, it's longer, and it doesn't check computed styles:
<div id="container">
<div id="a" style="display: none;">A
<div id="b">B
<div id="c">C</div>
</div>
</div>
</div>
var currentNode = document.getElementById('c');
while(currentNode.parentNode && currentNode.style.display !== 'none') {
currentNode = currentNode.parentNode;
}
alert(currentNode.id);
http://jsfiddle.net/nc4h2/
I'm using a javascript function to set the value of a text field, based on the option chosen from a select field.
The javascript contains a lot of other stuff, but only the following is relevant to this question.
$(function (){
$('.source').live("change", function(e) {
var target = $(this).next('.target')[0];
----other stuff----
});
});
I originally had my form set up as follows, and everything worked fine.
<select class="source"></select>
<input class="target"></input>
I've subsequently added some styling, which has required extra divs.
<select class="source"></select>
<div class="level1">
<div class="level2">
<input class="target"></input>
</div>
</div>
Now the javascript function does not work, because the next method only targets siblings and not descendants.
So my question is, what method should I be using to target a specific descendant?
An important fact: this markup is part of a nested form, and is repeated several times on the same page. It is important that the function targets the correct .target field, i.e. immediately subsequent and descendant.
I've tried obvious candidates – .find(), .children() — but these don't seem to work. Would appreciate any ideas or pointers.
Thanks!
Now that in the new markup structure .target input is wrapped in a div with class level1 you can find that div first using next() and then use find() method to get to the .target input.
$(function (){
$('.source').live("change", function(e) {
var target = $(this).next('.level1').find('.target')[0];
----other stuff----
});
});
Note: Even if you don't pass any selector to next() also it will work fine because it only selects the immediate next sibling optionally filtered by the selector which we pass.
In your case this would work:
$(function (){
$('.source').live("change", function(e) {
var target = $(this).next().find('.target')[0];
----other stuff----
});
})
;
It's a descendant of the sibling, so this should do the trick:
var target = $(this).next('.level1').find('.target')[0];