This is a followup to toggleClass of parent div not changing with onClick
In my HTML layout, I've found that I need to generate the div #filters
after the records, not before, because I need to use PHP to build the buttons for each state. This gave me the idea to use jQuery .append
to move the #filters to the #move-filters-here above the records. But after I filter on a state, the filters appear below the records and .append
doesn't work to move the #filters to #move-filters-here above the records.
Is .append
not working with (document).ready?
Is there a different way to get .append
to move the #filters?
Does .append
need to "fire" again after the Onclick function?
Fiddle: https://jsfiddle.net/j3semt6h/10/
$(document).ready(function(){
$("#filters").append("#move-filters-here");
$('.state-button').on('click', function() {
let _this = $(this);
if (!_this.hasClass('active')) {
$('.state-button.active, .record.active').removeClass('active');
$('[data-state=' _this.data('state') ']').addClass('active');
}
});
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.record.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="move-filters-here"></div>
<div data-state="AK">
<h1 >Customer 1</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: 345 Cow Town, Anchorage, <span >AK</span></li>
</ul>
</div>
<div data-state="AR">
<h1 >Customer 2</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: Mobile, <span >AR</span></li>
</ul>
</div>
<div data-state="CA">
<h1 >Customer 3</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: Los Angeles <span >CA</span></li>
</ul>
</div>
<div data-state="AZ">
<h1 >Customer 3</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: Flagstaff <span >AZ</span></li>
</ul>
</div>
<div data-state="UT">
<h1 >Customer 3</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: SLC <span >UT</span></li>
</ul>
</div>
<div id="filters">
<button data-state="AK">Alaska</button>
<button data-state="AR">Arkansas</button>
<button data-state="CA">California</button>
<button data-state="AZ">Arizona</button>
<button data-state="UT">Utah</button>
</div>
CodePudding user response:
I'm assuming you are confusing append
with appendTo
. Right now you are appending the literal text "#move-filters-here"
to the #filters
element's contents. It would work if you'd use $('#filters').appendTo('#move-filters-here')
instead.
$(document).ready(function(){
$("#filters").appendTo("#move-filters-here");
$('.state-button').on('click', function() {
let _this = $(this);
if (!_this.hasClass('active')) {
$('.state-button.active, .record.active').removeClass('active');
$('[data-state=' _this.data('state') ']').addClass('active');
}
});
});
.record {
display: none;
}
.state-button {
border: 2px solid #c2c2c2;
padding: 5px;
border-radius: 5px;
margin: 0 10px 0 10px;
}
.state-button.active {
border-color: red;
}
.record.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="move-filters-here"></div>
<div data-state="AK">
<h1 >Customer 1</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: 345 Cow Town, Anchorage, <span >AK</span></li>
</ul>
</div>
<div data-state="AR">
<h1 >Customer 2</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: Mobile, <span >AR</span></li>
</ul>
</div>
<div data-state="CA">
<h1 >Customer 3</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: Los Angeles <span >CA</span></li>
</ul>
</div>
<div data-state="AZ">
<h1 >Customer 3</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: Flagstaff <span >AZ</span></li>
</ul>
</div>
<div data-state="UT">
<h1 >Customer 3</h1>
<ul>
<li >Focus: </li>
<li >Course: </li>
<li >Business: </li>
<li >Location: SLC <span >UT</span></li>
</ul>
</div>
<div id="filters">
<button data-state="AK">Alaska</button>
<button data-state="AR">Arkansas</button>
<button data-state="CA">California</button>
<button data-state="AZ">Arizona</button>
<button data-state="UT">Utah</button>
</div>
(Or, if you'd want to use append
in particular for some reason, you'd need to do it the other way round and also actually reference the to-be-appended thing as element: $('#move-filters-here').append($('#filters'))
.)
CodePudding user response:
if you want append #filter
to #move-filters-here
you can do it like this:
$("#move-filters-here").append($("#filters"));
and if you do it vice-versa, you can acheive your goal like this:
$("#filters").append("#move-filters-here");