We Keep Coding

Displaying elements based on search

I would like the .box elements to show/hide based on the words the user searches for, so for example if a user types in 'Title2 Title1' because those words exists inside box one and two they will remain visible with the renaming .box elements hiding. All the text within the .box elements needs to be searchable not just that in the .title element.
Below is how far I've got. It's almost there but it's not quite working as hoped.
Any help would be great.
Many thanks.
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
<script>
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')')) {
$(this).show();
} else {
$(this).hide();
}
});
});
} else {
$(".box").show();
}
});
</script>

You need to use a different search method. :contains does not work as you expect. Consider the following example.
$(function() {
function filter(e) {
var term = $(e.target).val();
if (term.length < 3) {
$(".box").show();
return;
}
$(".box").each(function(i, el) {
if ($(".content", el).text().indexOf(term) >= 0) {
$(el).show();
} else {
$(el).hide();
}
});
}
$("#search").keyup(filter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">Box title one content</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">Box title two content</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">Box title three content</div>
</div>
So for example if on is entered, no filtering is performed. If one is entered, the script will look inside the content class of each box and if one is found in the text, it will be shown otherwise, it is hidden. If the User clears their search out, all items are shown.

Hide all box before iterate, then only show when match any words:
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
// Hide all .box
$(".box").each(function () {
$(this).hide();
})
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')') ) {
$(this).show();
}
});
});
} else {
$(".box").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>

Loop through all .boxs and using regex pattern matching, check either the title or content matches the search query. Show all matched boxes and hide all others
I have also fiddled it here
$("#search").on("input", function () {
var searchables=$('.box');
console.log(searchables)
var query=$(this).val();
searchables.each(function(i,item){
var title=$(item).find('.title').text();
var content=$(item).find('.content').text();
var rgx=new RegExp(query,'gi');
if(rgx.test(title) || rgx.test(content))
{
$(item).show();
}
else
{
$(item).hide();
}
})
})

Looping through elements not working

I want to check if this element has a matching data attribute value to all other elements, but the loop doesn't always work.
Stripped down code below.
HTML
<div class="list">
<div class="target" data-post-id="1"></div>
<div class="target" data-post-id="2"></div>
<div class="target" data-post-id="1"></div>
<div class="target" data-post-id="1"></div>
</div>
JS (event is tied to the target class):
if ($(this).data("post-id") == $(this).closest('.list').find('.target').data("post-id")) {
// do stuff
}
Clearly, I don't know how to loop through it properly. What's the solution?

You could probably use a one-liner:
if ($(this).closest('.list').find('.target[data-post-id=' + $(this).data("post-id") + ']').not(this).length > 0) {
// there was at least one other element in the list with the same data-post-id as the clicked element
}

I have an answer in pure javascript. Try this,
var divs = document.getElementsByClassName('list')[0].children;
function divClick(element) {
Array.from(divs).forEach(div => {
if(element != div) {
if (element.dataset.postId == div.dataset.postId) {
console.log("equal");
} else {
console.log("not equal");
}
}
});
}
<div class="list">
<div class="target" onclick="divClick(this)" data-post-id="1">One</div>
<div class="target" onclick="divClick(this)" data-post-id="2">Two</div>
<div class="target" onclick="divClick(this)" data-post-id="1">Three</div>
<div class="target" onclick="divClick(this)" data-post-id="1">Four</div>
</div>
.siblings() in jquery will be helpful in this case,
$(document).ready(function(){
$('.target').click(function(){
$.each($(this).siblings(), (div, element) => {
if($(element).data("post-id") == $(this).data("post-id")) {
console.log("Equal");
} else {
console.log("Not Equal");
}
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="target" data-post-id="1">One</div>
<div class="target" data-post-id="2">Two</div>
<div class="target" data-post-id="1">Three</div>
<div class="target" data-post-id="1">Four</div>
</div>

Do you need something like this?
var arr1 = [];
var arr2 = [];
$(".target").each(function(){
arr1.push($(this).data("post-id"));
});
$(".target").each(function(index){
var newArray = arr1.slice();
newArray.splice(index, 1); // remove index value from an array, so this index != match its own
console.log(newArray);
if ($.inArray($(this).data("post-id"), newArray ) !== -1){
$(this).text("Has A Match!");
}else{
$(this).text("No Match!");
}
});
Jsfiddle Here : https://jsfiddle.net/synz/votuqyp0/1/

This should work for you:
HTML
<div class="list">
<div class="not-a-sibling">
<div class="target" data-post-id="1"></div>
</div>
<div class="target" data-post-id="2"></div>
<div class="not-a-target">I'M NOT A TARGET, LEAVE ME ALONE!</div>
<div class="target" data-post-id="1"></div>
<div class="target" data-post-id="1"></div>
<div class="target" data-post-id="3"></div>
<div class="target" data-post-id="3"></div>
</div>
Assuming you're basing this on click event – obviously, change this to hover or whatever's relevant.
JS (More verbose example)
$(document).on('click', '.target', function() {
var clickedTarget = $(this);
var clickedTargetPostId = clickedTarget.data('post-id');
var elementsToCompare = clickedTarget.parents('.list').find('.target').not(this);
elementsToCompare.each(function() {
var elementToComparePostId = $(this).data('post-id');
if (elementToComparePostId === clickedTargetPostId) {
alert('Found a match!');
}
});
});
Test it out here:
https://jsfiddle.net/5wv40vq9/4/
JS (Less verbose)
$(document).on('click', '.target', function() {
var _this = this;
$(_this).parents('.list').find('.target').not(this).each(function() {
if ($(this).data('post-id') === $(_this).data('post-id')) {
alert('Found a match!');
}
});
});
https://jsfiddle.net/5wv40vq9/5/

How to reuse the JavaScript function in order to avoid repeating the same lines of code?

I'm a beginner to JavaScript. The lines of code that I've written in JavaScript are working for individual actions that happens in the HTML part but I want to make it as a single function which can handle all the cases actions that happens in the HTML part.
How to make one JavaScript function which can be used for different separate actions which has similar lines of code but different HTML classes?
HTML -
<div class="first" class="row">
<div>
<div class="first1">
<img class="first_img" src="assets/imgs/01.png"/>
</div>
<div class="first2">
<h4 class="first_title"><b> life... </b></h4>
<p class="first_content"> thinking, feelings, emotions, meanings, and values. </p>
<button class="btn"> <img src="assets/imgs/Icons-06.png"> </button>
<button class="btn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div class="second" class="row">
<div class="second1">
<div class="second2">
<div class="second_title">
<h5><b> questions... </b></h5>
</div>
<div class="second_content" style="">
<div>
<p> Human thinking involves asking questions and getting answers.
</p>
</div>
<button class="second-btn" style=""> <img src="assets/imgs/Icons-06.png"> </button>
<button class="secondbtn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div>
<img class="second_img" src="assets/imgs/02.png" style="" />
</div>
</div>
Javascript -
$(document).ready(function () {
$('.firstsub').hide();
$('.second-sub').hide();
$('.firstbtn').click (function (event)
{
$('.firstsub').toggle('show');
});
// if (javascript(window).width() > 500) {
$('.second-btn').click (function (event)
{
$('.second-sub').toggle('show');
});
});
$(document).ready(function () {
$('.firstbtn_replace').hide();
$('.secondbtn_replace').hide();
$('.firstbtn').click (function (event)
{
$('.firstbtn').addClass('hide');
$('.firstbtn_replace').show();
});
$('.firstbtn_replace').click (function (event)
{
$('.firstsub').toggle('show');
$('.firstbtn').removeClass('hide');
$('.firstbtn_replace').hide();
});
// if (javascript(window).width() > 500) {
$('.second-btn').click (function (event)
{
$('.second-btn').addClass('hide');
$('.secondbtn_replace').show();
});
$('.secondbtn_replace').click (function (event)
{
$('.second-sub').toggle('show');
$('.second-btn').removeClass('hide');
$('.secondbtn_replace').hide();
});
});

First off, You have to clean up your code. Everything there can be written in one $(document).ready()
$(document).ready(function () {
$('.firstsub').hide();
$('.second-sub').hide();
$('.firstbtn_replace').hide();
$('.secondbtn_replace').hide();
$('.firstbtn').click (function (event) {
$('.firstsub').toggle('show');
$('.firstbtn').addClass('hide');
$('.firstbtn_replace').show();
});
$('.firstbtn_replace').click (function (event) {
$('.firstsub').toggle('show');
$('.firstbtn').removeClass('hide');
$('.firstbtn_replace').hide();
});
// if (javascript(window).width() > 500) {
$('.second-btn').click (function (event) {
$('.second-sub').toggle('show');
$('.second-btn').addClass('hide');
$('.secondbtn_replace').show();
});
$('.secondbtn_replace').click (function (event) {
$('.second-sub').toggle('show');
$('.second-btn').removeClass('hide');
$('.secondbtn_replace').hide();
});
});
Second, You can pass parameters to functions that happen often. For example
function hideClasses(classes) {
for(var i = 0; i < classes.length; i++ ) {
$(classes[i]).hide();
}
}
Call it like this, passing in the classes to be hidden as an array.
hideClasses(['.firstsub', '.second-sub']);
or take for example the click action of each button.
function buttonClicked(class) {
$(class).toggle('show');
$(class).removeClass('hide');
$(class).hide();
}
So your $('.firstbtn_replace').click() can be this
$('.firstbtn_replace').click (function (event) {
buttonClicked('.firstbtn_replace');
});
The same goes for $('.secondbtn_replace').click()
$('.secondbtn_replace').click (function (event) {
buttonClicked('.firstbtn_replace');
});
You can do the same for $('.firstbtn').click() and $('.secondbtn').click()
The ending result will be
$(document.ready(function() {
function hideClasses(classes) {
for(var i = 0; i < classes.length; i++ ) {
$(classes[i]).hide();
}
}
function replaceButtonClicked(className) {
$(className).toggle('show');
$(className).removeClass('hide');
$(className).hide();
}
function normalButtonClicked(className) {
$(className).toggle('show');
$(className).addClass('hide');
$(className).hide();
}
hideClasses(['.firstsub', '.second-sub', '.firstbtn_replace', '.secondbtn_replace']);
$('.firstbtn').click (function (event) {
normalButtonClicked('.firstbtn');
}
$('.secondbtn').click (function (event) {
normalButtonClicked('.secondbtn');
}
$('.firstbtn_replace').click (function (event) {
normalButtonClicked('.firstbtn_replace');
}
$('.secondbtn_replace').click (function (event) {
replaceButtonClicked('.secondbtn_replace');
}
});
Or instead of writing the classes each time you can the function, you can pass in the jQuery object itself.
Ending in this as a final result.
$(document.ready(function() {
function hideClasses(classes) {
for(var i = 0; i < classes.length; i++ ) {
$(classes[i]).hide();
}
}
// obj refers to the jQuery object the clicked was called on
function replaceButtonClicked(obj) {
obj.toggle('show');
obj.removeClass('hide');
obj.hide();
}
// obj refers to the jQuery object the clicked was called on
function normalButtonClicked(class) {
obj.toggle('show');
obj.addClass('hide');
obj.hide();
}
hideClasses(['.firstsub', '.second-sub', '.firstbtn_replace', '.secondbtn_replace']);
// this refers to the jQuery object the clicked was called on
$('.firstbtn').click (function (event) {
normalButtonClicked(this);
}
// this refers to the jQuery object the clicked was called on
$('.secondbtn').click (function (event) {
normalButtonClicked(this);
}
// this refers to the jQuery object the clicked was called on
$('.firstbtn_replace').click (function (event) {
normalButtonClicked(this);
}
// this refers to the jQuery object the clicked was called on
$('.secondbtn_replace').click (function (event) {
replaceButtonClicked(this);
}
});

You could do something similar to below. the event parameter that gets passed with a click event has a plethora of information. Use it and a switch statement to determine what you want to do.
$(document).ready(function() {
$('.firstsub').hide();
$('.second-sub').hide();
$('.firstbtn').click(clickHandler(event));
$('.second-btn').click(clickHandler(event));
});
function clickHandler(event){
//event param will have all the details about who and what was clicked
switch(/*event or something in event*/){ //switch over details of the event and manage them all here
}
}
<div class="first" class="row">
<div>
<div class="first1">
<img class="first_img" src="assets/imgs/01.png"/>
</div>
<div class="first2">
<h4 class="first_title"><b> life... </b></h4>
<p class="first_content"> thinking, feelings, emotions, meanings, and values. </p>
<button class="btn"> <img src="assets/imgs/Icons-06.png"> </button>
<button class="btn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div class="second" class="row">
<div class="second1">
<div class="second2">
<div class="second_title">
<h5><b> questions... </b></h5>
</div>
<div class="second_content" style="">
<div>
<p> Human thinking involves asking questions and getting answers.
</p>
</div>
<button class="second-btn" style=""> <img src="assets/imgs/Icons-06.png"> </button>
<button class="secondbtn_replace"> <img src="assets/imgs/Icons-07.png"> </button>
</div>
</div>
</div>
<div>
<img class="second_img" src="assets/imgs/02.png" style="" />
</div>
</div>

jQuery stop function running twice

I am using slideUp / down to show and hide content and have written it to that it will close any visible content when opening another one. This works until I try to close content by clicking on it, it opens it again straight away.
The HTML
<ul class="contents">
<li>
while($results->fetch()){
<div class="details">text</div>
<div class="more_details">more text</div>
}
</li>
</ul>
The jQuery
$("#results").on("click", ".details", function() {
$(".open").slideUp(600, function() {
$(".open").css("display", "none").removeClass("open");
});
if ($(this).hasClass("open")) {
$(this).slideUp( 600, function() {
$(this).css("display", "none").removeClass("open");
});
} else {
$(this).next(".more_details").slideDown(600, function() {
$(this).css("display", "show").addClass("open");
});
}
});

In the slide down code you are working with the next sibling more_details, where in the slide up code you are dealing with this element.
$("#results").on("click", ".details", function() {
var $details = $(this).next(".more_details");
$details.slideToggle(600, function() {
$details.toggleClass("open");
});
$(".more_details.open").not($details).slideUp(600, function() {
$(this).removeClass("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
</div>

jquery unable to select element using next/closest

I have the following HTML on my page;
<div id="c2">
<input type="checkbox" class="expandCollapseSection" id="my_chk">
<span>Header</span>
<div style="" class="contentDiv">
<div class="oj-inputtext oj-form-control oj-component">some things</div>
</div>
</div>
I have the following JS code;
$(".expandCollapseSection").click(function (event) {
if ($(this).prop("checked")) {
$(this).next('.contentDiv').slideDown('slow');
} else {
$(this).next('.contentDiv').slideUp('slow');
}
});
Now my question is $(this).next('.contentDiv') does not select the contentDiv
I even tried using $(this).closest('.contentDiv')
But still does not select.
Just to add $(".contentDiv") does get the div though.
Am I doing something wrong here?

use siblings( ".selected" )
$(".expandCollapseSection").click(function (event) {
if ($(this).prop("checked")) {
$(this).siblings('.contentDiv').slideDown('slow');
} else {
$(this).siblings('.contentDiv').slideUp('slow');
}
});
Demo

You can try:
$(this).closest('div').find('.contentDiv');
$(".expandCollapseSection").click(function (event) {
if ($(this).prop("checked")) {
$(this).closest('div').find('.contentDiv').css({'color':'red'});
} else {
$(this).closest('div').find('.contentDiv').css({'color':'green'});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="c2">
<input type="checkbox" class="expandCollapseSection" id="my_chk">
<span>Header</span>
<div style="" class="contentDiv">
<div class="oj-inputtext oj-form-control oj-component">some things</div>
</div>
</div>
<div id="c3">
<input type="checkbox" class="expandCollapseSection" id="my_chk">
<span>Header</span>
<div style="" class="contentDiv">
<div class="oj-inputtext oj-form-control oj-component">some things</div>
</div>
</div>

kapantzak's answer is correct.
However you could simply use
$(this).parent().find('.contentDiv');
Slightly more efficient, as you don't have to find closest div.

Try This Code,
$(".expandCollapseSection").click(function (event) {
if ($(this).prop("checked")) {
$(this).closest('#c2').find('.contentDiv').slideDown('slow');
} else {
$(this).closest('#c2').find('.contentDiv').slideUp('slow');
}
});

You may also use nextAll and shorten your code too, like below.
$(".expandCollapseSection").change(function (event) {
var div = $(this).nextAll('.contentDiv');
var func = this.checked ? 'slideDown' : 'slideUp';
div[func]("slow");
});
Demo#Fiddle