I can't figure out why I can't sort and filter divs with jqueryUsing jQuery to center a DIV on the screenSwitching a DIV background image with jQueryCreating a div element in jQueryHow to replace innerHTML of a div using jQuery?Use jQuery to hide a DIV when the user clicks outside of itHow to break out of jQuery each LoopFind out if radio button is checked with JQuery?Check if a div exists with jqueryjQuery SVG, why can't I addClass?Why does jQuery or a DOM method such as getElementById not find the element?
Scaling an object to change its key
How can I prevent a user from copying files on another hard drive?
What kind of chart is this?
Can I apply for a working holiday visa at age 30 and get the full 12 months?
I calculated that we should be able to see the sun well beyond the observable universe. Where did I go wrong?
How can the US president give an order to a civilian?
Are intrusions within a foreign embassy considered an act of war?
First occurrence in the Sixers sequence
Umlaut character order when sorting
What is the most suitable position for a bishop here?
Time at 1 g acceleration to travel 100 000 light years
Need help understanding the double sharp turn in Chopin's prelude in e minor
If the mass of the Earth is decreasing by sending debris in space, does its angular momentum also decrease?
How to make all magic-casting innate, but still rare?
How to compute the inverse of an operation in Q#?
Predict the product from the reaction
Why do you need to heat the pan before heating the olive oil?
What is the highest power supply a Raspberry pi 3 B can handle without getting damaged?
Why are there no file insertion syscalls
Counterfeit checks were created for my account. How does this type of fraud work?
「捨ててしまう」why is there two て’s used here?
Parse JSON in LWC
How to sort human readable size
Justifying Affordable Bespoke Spaceships
I can't figure out why I can't sort and filter divs with jquery
Using jQuery to center a DIV on the screenSwitching a DIV background image with jQueryCreating a div element in jQueryHow to replace innerHTML of a div using jQuery?Use jQuery to hide a DIV when the user clicks outside of itHow to break out of jQuery each LoopFind out if radio button is checked with JQuery?Check if a div exists with jqueryjQuery SVG, why can't I addClass?Why does jQuery or a DOM method such as getElementById not find the element?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
After working on my code for quite a while, I finally got everything setup. The CSS is correct, the HTML is correct, and as some of you pointed out, my formatting is correct so I can easily see problems. However, the last step is to be able to sort and filter my divs. As you can see from the code, the whole goal is to keep them together. When I did have it working, it was only pulling specific text and not staying inline. I think I have the inline problem solved, however my jquery is now refusing to respond at all when you start typing in the search bar.
I've tried adding div Id's to all of my classes, changing the jquery code and a couple other things my frustrated brain can't remember right now.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
<script>
// <![CDATA[
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$("#myDiv").filter(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
// ]]>
</script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
jquery
add a comment |
After working on my code for quite a while, I finally got everything setup. The CSS is correct, the HTML is correct, and as some of you pointed out, my formatting is correct so I can easily see problems. However, the last step is to be able to sort and filter my divs. As you can see from the code, the whole goal is to keep them together. When I did have it working, it was only pulling specific text and not staying inline. I think I have the inline problem solved, however my jquery is now refusing to respond at all when you start typing in the search bar.
I've tried adding div Id's to all of my classes, changing the jquery code and a couple other things my frustrated brain can't remember right now.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
<script>
// <![CDATA[
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$("#myDiv").filter(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
// ]]>
</script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
jquery
Typo:<scriptsrc
should be<script src
.
– trincot
Mar 25 at 6:18
NB: don't use.filter()
for just iterating. Use.each()
instead.
– trincot
Mar 25 at 6:20
Try changing#myDiv
to.divtablecell
– Aswin Kumar
Mar 25 at 6:29
The script source typo was when I copied the code thank you for the .filter tip. Also thank you all. I realized when I was using #myDiv and switched it to .divtablecell I was actually using #divtablecell.
– tyrant1014
Mar 25 at 7:18
add a comment |
After working on my code for quite a while, I finally got everything setup. The CSS is correct, the HTML is correct, and as some of you pointed out, my formatting is correct so I can easily see problems. However, the last step is to be able to sort and filter my divs. As you can see from the code, the whole goal is to keep them together. When I did have it working, it was only pulling specific text and not staying inline. I think I have the inline problem solved, however my jquery is now refusing to respond at all when you start typing in the search bar.
I've tried adding div Id's to all of my classes, changing the jquery code and a couple other things my frustrated brain can't remember right now.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
<script>
// <![CDATA[
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$("#myDiv").filter(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
// ]]>
</script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
jquery
After working on my code for quite a while, I finally got everything setup. The CSS is correct, the HTML is correct, and as some of you pointed out, my formatting is correct so I can easily see problems. However, the last step is to be able to sort and filter my divs. As you can see from the code, the whole goal is to keep them together. When I did have it working, it was only pulling specific text and not staying inline. I think I have the inline problem solved, however my jquery is now refusing to respond at all when you start typing in the search bar.
I've tried adding div Id's to all of my classes, changing the jquery code and a couple other things my frustrated brain can't remember right now.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
<script>
// <![CDATA[
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$("#myDiv").filter(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
// ]]>
</script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
jquery
jquery
asked Mar 25 at 6:12
tyrant1014tyrant1014
102
102
Typo:<scriptsrc
should be<script src
.
– trincot
Mar 25 at 6:18
NB: don't use.filter()
for just iterating. Use.each()
instead.
– trincot
Mar 25 at 6:20
Try changing#myDiv
to.divtablecell
– Aswin Kumar
Mar 25 at 6:29
The script source typo was when I copied the code thank you for the .filter tip. Also thank you all. I realized when I was using #myDiv and switched it to .divtablecell I was actually using #divtablecell.
– tyrant1014
Mar 25 at 7:18
add a comment |
Typo:<scriptsrc
should be<script src
.
– trincot
Mar 25 at 6:18
NB: don't use.filter()
for just iterating. Use.each()
instead.
– trincot
Mar 25 at 6:20
Try changing#myDiv
to.divtablecell
– Aswin Kumar
Mar 25 at 6:29
The script source typo was when I copied the code thank you for the .filter tip. Also thank you all. I realized when I was using #myDiv and switched it to .divtablecell I was actually using #divtablecell.
– tyrant1014
Mar 25 at 7:18
Typo:
<scriptsrc
should be <script src
.– trincot
Mar 25 at 6:18
Typo:
<scriptsrc
should be <script src
.– trincot
Mar 25 at 6:18
NB: don't use
.filter()
for just iterating. Use .each()
instead.– trincot
Mar 25 at 6:20
NB: don't use
.filter()
for just iterating. Use .each()
instead.– trincot
Mar 25 at 6:20
Try changing
#myDiv
to .divtablecell
– Aswin Kumar
Mar 25 at 6:29
Try changing
#myDiv
to .divtablecell
– Aswin Kumar
Mar 25 at 6:29
The script source typo was when I copied the code thank you for the .filter tip. Also thank you all. I realized when I was using #myDiv and switched it to .divtablecell I was actually using #divtablecell.
– tyrant1014
Mar 25 at 7:18
The script source typo was when I copied the code thank you for the .filter tip. Also thank you all. I realized when I was using #myDiv and switched it to .divtablecell I was actually using #divtablecell.
– tyrant1014
Mar 25 at 7:18
add a comment |
1 Answer
1
active
oldest
votes
Problem 1) there is no element with an id of mydiv
Problem 2) $("#myDiv")
would target a single element with an id of myDiv, if it existed.
Solution: change your selector to $(".divtablecell")
to select all div
with that class.
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55332133%2fi-cant-figure-out-why-i-cant-sort-and-filter-divs-with-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Problem 1) there is no element with an id of mydiv
Problem 2) $("#myDiv")
would target a single element with an id of myDiv, if it existed.
Solution: change your selector to $(".divtablecell")
to select all div
with that class.
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
add a comment |
Problem 1) there is no element with an id of mydiv
Problem 2) $("#myDiv")
would target a single element with an id of myDiv, if it existed.
Solution: change your selector to $(".divtablecell")
to select all div
with that class.
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
add a comment |
Problem 1) there is no element with an id of mydiv
Problem 2) $("#myDiv")
would target a single element with an id of myDiv, if it existed.
Solution: change your selector to $(".divtablecell")
to select all div
with that class.
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
Problem 1) there is no element with an id of mydiv
Problem 2) $("#myDiv")
would target a single element with an id of myDiv, if it existed.
Solution: change your selector to $(".divtablecell")
to select all div
with that class.
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
$(document).ready(function()
$("#myInput").on("keyup", function()
var value = $(this).val().toLowerCase();
$(".divtablecell").each(function()
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
);
);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="div1"><input id="myInput" type="text" placeholder="Search.." /></div>
<div class="gridcontainer">
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG1JT508626 STOCK #: 082030 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE ALTITUDE 4X2 <br /> VIN: ZACCJABB4JPH91207 STOCK #: 586043 <br /> MSRP$25,915
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 DODGE JOURNEY V6 VALUE PACKAGE <br /> VIN: 3C4PDCBG3JT511401 STOCK #: 082035 <br /> MSRP$27,385
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB4JPJ43841 STOCK #: 586049 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2018 JEEP RENEGADE SPORT 4X4 <br /> VIN: ZACCJBAB3JPJ42826 STOCK #: 586051 <br /> MSRP$26,240
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
<div class="divtablecell">NEW 2019 JEEP COMPASS SPORT FWD <br /> VIN: 3C4NJCAB8KT615373 STOCK #: 492005 <br /> MSRP$25,285
<p><a target="_self" href="pid:15311737" class="buttonGhost">Request internet advertised price.</a></p>
</div>
answered Mar 25 at 6:40
Jon PJon P
12.5k73460
12.5k73460
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55332133%2fi-cant-figure-out-why-i-cant-sort-and-filter-divs-with-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Typo:
<scriptsrc
should be<script src
.– trincot
Mar 25 at 6:18
NB: don't use
.filter()
for just iterating. Use.each()
instead.– trincot
Mar 25 at 6:20
Try changing
#myDiv
to.divtablecell
– Aswin Kumar
Mar 25 at 6:29
The script source typo was when I copied the code thank you for the .filter tip. Also thank you all. I realized when I was using #myDiv and switched it to .divtablecell I was actually using #divtablecell.
– tyrant1014
Mar 25 at 7:18