We Keep Coding

JQuery select all where arbitrary parent has class X

I'm trying to figure out a jquery selector where I can grab all DOM elements with name A, that ALSO have a grandparent with class X. Here's an example HTML, I will have many of these
<div class="interface_controlgroup">
<div class="form-switch me-3">
<input name="layout[]" type="checkbox" class="form-check-input">
</div>
</div>
<!-- note some inputs will have "d-none" on the grandparent -->
<div class="interface_controlgroup d-none">
<div class="form-switch me-3">
<input name="layout[]" type="checkbox" class="form-check-input">
</div>
</div>
...
<!-- repeated -->
Now I would like to select all inputs, as well as all inputs where the grandparent has d-none
let all_inputs = $('input[name=layout\\[\\]]');
//cannot use this because the entire section may be hidden when this is run
let hidden_inputs = $('input[name=layout\\[\\]]:hidden');
//I need something more like
let hidden_inputs = $('input[name=ide_layout_std\\[\\]]'.parent().parent()".d-none");
I am looking for a solution that allows me to only select when the parent's parent has a certain class, but I don't know how to create this match. I also can't rely on ":hidden" in the jquery selector because the entire section/page may be hidden when this javascript is running.
Using JQuery 3.6 and Bootstrap 5

You can use the x > y child selector to solve this. x > * > z matches z with a grandparent x (the parent in the middle can be anything).
let hidden_inputs = $('.d-none > * > input[name=ide_layout_std\\[\\]]:hidden');

Div slider doesn't work - Javascript

I recently created a simple image slider here: http://americanbitcoinacademy.com/test2/
Which has basically a next and prev buttons and slides the image. You can check the codes of that here: https://jsfiddle.net/mmytscuz/
And now I am trying to apply these codes to my new element but this time instead of images I am trying to apply it using div elements.
You can check my current progress work here: https://jsfiddle.net/7808uLpv/
So basically when you click the next button it must slide up on the next list item element. For some reason it won't hide the other elements now also it doesn't slide either.
So far here's how I layout my elements:
<ul class="slider">
<li>
<div class="box center">
<h1>What is your name?</h1>
<input type="text" name="name" placeholder="Your Name.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
<li>
<div class="box center">
<h1>How much money do you have?</h1>
<input type="text" name="money" placeholder="Your Money.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
<li>
<div class="box center">
<h1>Your Birthday?</h1>
<input type="text" name="bday" placeholder="Your Birthday.."/>
<div id="slider-nav">
<button data-dir="next" >Next »</button>
</div>
</div>
</li>
</ul>
And here's my javascript:
(function() {
var container = $('div.slider').css('overflow', 'hidden').children('ul'),
slider = new Slider( container, $('#slider-nav') );
slider.nav.find('button').on('click', function() {
slider.setCurrent( $(this).data('dir') );
slider.transition();
});
})();
function Slider( container, nav ) {
this.container = container;
this.nav = nav.show();
this.imgs = this.container.find('img');
this.imgWidth = this.imgs[0].width; // 600
this.imgsLen = this.imgs.length;
this.current = 0;
}
Slider.prototype.transition = function( coords ) {
this.container.animate({
'margin-left': coords || -( this.current * this.imgWidth )
});
};
Slider.prototype.setCurrent = function( dir ) {
var pos = this.current;
pos += ( ~~( dir === 'next' ) || -1 );
this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;
return pos;
};
Any idea what am I doing wrong when I click the 'NEXT' button why the elements are not sliding as well why are they all showing up at once?

There's a lot wrong with your fiddle.
No jQuery loaded.
No div.slider that you refer to for plugin initialization.
You use id slider-nav like a class. Id must be unique.
In css li.slider needs to be .slider li
You're looking for images within js but there are none in the markup.
Consequently, your plugin is throwing errors, trying to detect width of these images that don't exist: this.imgs[0].width;
Imo, just start over, get a solid html and css base and only then try to write the js plugin.

Just add jQuery because without not working.See the Demo here
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

How to proper positioning elements in jQuery Mobile?

I want to have in listview in listitem (Note: the listitem <li> is generated dynamically with JS) product value on the left and button on the right but
I have align="center" in <div data-role="main" align="center">
and get centered product value and button but if I place in <div> (in listitem) product value and in another <div> a button
I get on the left product value and on the right button (but in lower line)
like this img
so how to proper position this?
var li = '<li><div>' + productVal + btn + '</div></li>';
so on the left sth and on the right a button
here is my code https://jsbin.com/revuto/edit?html,output
actually I have
but want
sorry for Polish text in code
so I translate Polish - English
Wprowadź product - provide a product
dodaj - add
usuń- remove
niebezpieczna strefa- danger zone

use a wrapper classed ui-grid-a and wrap each "column" in a div ui-block-a and ui-block-b
e.g.
<div class="ui-grid-a">
<label class="ui-block-a" for="input">
label: <input type="text" id="input">
</div>
<div class="ui-block-b">
<br>
<button type="button" >Button</button>
</div>
</div>

Javascript stopping scroll from jumping

I have a page where you can click to slideDown an element from the top of the page.
I am trying to create a rule that says if the push down is visible and the screen has scrolled further than the height of the push down then it should be hidden again. Meaning the user will have to push the button to get it to show again.
In my HTML I have:
<div class="row" id="learn-more" style="display:none">
<div class="small-12 columns" id="close">
<p id="close-learn">
<i class="fa fa-times pull-right fa-2x"></i>
</p>
</div>
<div class="small-12 columns" id="learn-content">
<h1>Content for Pushdown</h1>
</div>
</div>
<div class="row" id="hero">
<div class="small-12 columns small-centered">
<p id="learn"><a class="transition">Learn More</a></p>
</div>
</div>
In my Javascript I have:
// Open and close learn more section
$("#learn").on("click", function() {
$("#learn-more").slideDown();
});
$("#close-learn").on("click", function() {
$("#learn-more").slideUp();
});
// Close learn-more based on scroll position
$(window).on("scroll", function() {
var scrollPosition = $(window).scrollTop();
if ($("#learn-more").is(":visible") && scrollPosition > $("#learn-more").height()) {
$("#learn-more").slideUp()
}
});
This all works but when the #learn-more element slides up the page jumps down about 500 pixels which is the height of the #learn-more element. I would like mine to work in the same way as Airbnb's new homepage when you click the 'how it works' button and then scroll below the push down element.
Any advice would be much appreciated.

Seems that this situation occurs because $(window).scrollTop position is preserved after the the slideUp() is called.
But we can memorize the visible position of Learn More button relative to the top of the window and after text block is hidden return to this position. Also, i suggest to use hide() instead of slideUp() here.
Here is what I suggest to do on scroll:
$(window).on("scroll", function(event) {
var scrollPosition = $(window).scrollTop();
var learnMore = $("#learn-more");
if (learnMore.is(":visible") && scrollPosition > learnMore.height()) {
var learnMoreButtonTop = $("#learn").offset().top - scrollPosition;
learnMore.hide();
$(window).scrollTop(learnMoreButtonTop);
}
});
Working example

Toggling the background image of div on click using Javascript

Hi there I am trying to use Javascript to toggle the background image of a div when clicked
This is what I have done to try and achieve this:
My code is as follows
HTML:
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" id="Accordion1Title" onselectstart="return false;" onclick="changeArrow(1);" >
Instructions
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<p>Enter in your search parameters by clicking on the title of... </p>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" id="Accordion2Title" onselectstart="return false;" onclick="changeArrow(2);" >
Colour
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
[wpv-control field="cultivar-category" type="checkboxes" values="Dark Red" url_param="cultivar-category"]
</div>
</div>
</div>
Javascript:
function changeArrow(index)
{
var arrowID = "Accordian" + index + "Title";
document.getElementById(arrowID).style.background="url(./img/accordian-title-up.png) no-repeat scroll 0 0 transparent";
}
However nothing happens when I click on a div that contains onclick="runAccordion(index);"
What am I missing here?

runAccordion is maybe overriding or blocking changeArrow, depending on the structure of your HTML. Try combining them in the same onclick listener (runAccordion(1);changeArrow(1);) and see what happens there.
Also, if you've fixed this, check your image path.
EDIT
You have a typo:
var arrowID = "Accordian" + index + "Title";
should be:
var arrowID = "Accordion" + index + "Title";