Develop Reference

javascript search function for hiding everything not matching input

I would like to implement a search function which uses input to find text on my page without pressing enter and hiding everything else not matching the current input.
Tricky stuff: the text on my page is hidden by default and only visible by hovering its container tiles. Also the entire page is built by scripts. This is the structure:
<div id="data" class="grid-container">
<div class="grid-item">
<div class="inside" id="item0">
<h2 id="contents0" class="content-title" href="some link">some headline</h2>
<div class="collapsing">
<br>
<table>
<tbody>
<tr id="tr0">
<td class="tabledata">
<a class="content" href="some link">some headline</a>
</td>
</tr>
<tr>
<td class="tabledata">
<a class="content" href="some link">some headline</a>
</td>
</tr>
<tr>
<td class="tabledata">
<a class="content" href="some link">some headline</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
so there are various grid-item's like this one with different amounts of tabledata's.
this is the input:
<input class="search" type="search" placeholder="Search" id="input">
Any ideas on how to do this for my special case?
I want to hide the entire grid-item if nothing inside matches the current input and I want to hide only the tabledatas not matching the current input if there are matches with one ore more other tabledatas in the same grid-item.
this is my attempt at editing the suggestion down there:
<script>
function findDom(val) {
if (val === '') {
document.querySelectorAll('.hideElem').forEach(function(item) {
item.classList.remove('hideElem')
})
return;
}
document.querySelectorAll('.content').forEach(function(item) {
if (item.textContent.trim().includes(val)) {
item.classList.remove('hideElem')
}
else {
item.classList.add('hideElem')
}
})
}
document.getElementById('input').addEventListener('keyup', (e) => {
setTimeout(function() {
findDom(e.target.value.trim())
}, 2000)
})
</script>
CSS:
.hideElem {
display: none;
}
However it does not work at all...

Please check the inline comments for description
// this function will first check if the search value is empty , then
// it will get all the a tag that are visible and will hide them
function findDom(val) {
if (val === '') {
document.querySelectorAll('.showElem').forEach(function(item) {
item.classList.remove('showElem')
})
return;
}
// otherwise it is going to get the content from each a tag and will check
// if the conent includes the search keyword, in that case it will show
// the a
document.querySelectorAll('.content').forEach(function(item) {
// hiding previously displayed a tags
item.classList.remove('showElem')
// check if current a tag contains this text
if (item.textContent.trim().includes(val)) {
item.classList.add('showElem')
}
})
}
// this will get the value entered in the text field
document.getElementById('ip').addEventListener('keyup', (e) => {
// wait for 2 secs for and search for the value, without timeout it will
// search for every text entered
setTimeout(function() {
findDom(e.target.value.trim())
}, 2000)
})
.content {
display: none;
}
.showElem {
display: block;
}
<div id="data" class="grid-container">
<div class="grid-item">
<div class="inside" id="item0">
<h2 id="contents0" class="content-title" href="some link">some headline</h2>
<div class="collapsing">
<br>
<table id='table'>
<tbody>
<tr id="tr0">
<td class="tabledata">
<a class="content" href="some link">some 1</a>
</td>
<td class="tabledata">
<a class="content" href="some link">some 2</a>
</td>
<td class="tabledata">
<a class="content" href="some link">some 3</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<input class="search" id='ip' type="text" placeholder="Search" id="input">

jQuery - how to find a table inside a div

I have the following jsp
<div class="content" id="divContent">
<ul class="ul-content ui-sortable" id="content" style="padding-left: 10px; max-width: 920px;">
<li class="draggable freetext ui-draggable ui-draggable-handle content-element" style="width:; height:; overflow: auto;">
<div class="element-content">
<div class="questiontitle elementtitle" id="58f95b7f-c127-7e40-a3a7-5253ed32fc31">
<table>
<tbody>
<tr>
<td>
<span class="optional1">(Opcional )</span>
</td>
<td>New Freetext Question</td>
</tr>
</tbody>
</table>
</div>
<input class="freetext" type="text" readonly="readonly">
<div class="questionhelp">
</div>
</div>
</li>
</ul>
</div>
I want to find the table inside the div
<div class="questiontitle elementtitle" id="58f95b7f-c127-7e40-a3a7-5253ed32fc31">
I wrote the code:
var contentDivTable = $(contentDiv).find('tr');
var numerocontentDivTable = contentDivTable.length;
console.log('additem after addfreetext contenDiv number table ',numerocontentDivTable);
This is the trace in browser's console
additem after addfreetext contenDiv [object HTMLDivElement]
"additem after addfreetext contenDiv "
<div class="questiontitle elementtitle" id="146b750d-18e8-b8a5-a34d-082c9bd04e0d">New Freetext Question</div>
additem after addfreetext contenDiv number table 0
How can I get the element table?

If you want to select the table inside a div
Apply a css class on div like: <div class="content">
Then use $('.content table') to select table which is inside that div

If you want to check whether there is a table or not, you can do:
if($("#divContent").find('table').length) {
// table exists
} else {
// no table found
}

If divContent have single .questiontitle class div, then you can try as below
var tbl= $("#divContent .questiontitle").find('table');
// this will display full table html content
console.log(tbl.html());
Then if you want to loop over table row data try below code
$(tbl).find('tr').each(function(){
var currentRow=$(this);
var col1_value=currentRow.find("td:eq(0)").text();
var col2_value=currentRow.find("td:eq(1)").text();
});

How do I scan all elements within a class to find a specific id and repeat the process for different ids?

I am quite new to jquery, so please excuse me if I'm doing something stupid:
I have a table where each td belongs to the same class "original" and each one has a unique id.
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
...
...
</table>
I also have a div where all elements are part of a separate class "onclick" and each element has another unique id that is connected to each td from the table.
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
...
...
</div>
When I click on each individual td, I want to display its corresponding div, so if I click on "1" then "1click" shows up. I currently have this jquery code that successfully does this, but only for the first pair of elements, so it doesn't work for anything beyond id="1" and id="1click".
$(function () {
$(".original").click(function() {
var divname = this.id;
if ($(".onclick").attr("id") == divname + 'click'){
var clickname= "#" + divname + "click";
if ($(".hide").css("display") == 'none'){
$(clickname).toggle();
}
}
}
}
How can I make it so that it searches each element of the table to find a match with each element of the div?
Thanks, and sorry if this is a stupid mistake.

I'm finding it difficult understanding what you're trying to do and would love to help but I need to try and understand it better.
1) You can search using .each() which will scan all the elements and you can use a conditional statement to find the one which is needed: I.e.
$(document).ready(function(){
$("td").each(function() {
if ($(this).attr("id") == "2") {
var element = $("#"+$(this).attr("id")+"click");
// do stuff with element
}
})
});
I created a small example which I think helps your scenario on JSFiddle: https://jsfiddle.net/keuhfu36/
$(document).ready(function(){
$("#i2click").click(function() {
alert("hello");
});
$("td").each(function() {
if ($(this).attr("id") == "i2") {
$("#"+$(this).attr("id")+"click").click();
}
});
});
2) I recommend you change the div values from id='1' and id='2' like i did in the example to a value which starts with a letter i.e id="i1" and id="i2" which makes it a lot less of a pain to work with.

Your script should be like ,
$(".original").click(function() {
var divId = this.id,
targetDiv = $("#"+divId+"click");
$(".onclick:visible").hide();
targetDiv.show();
});

Try the following code:
$(function(){
$('.onclick').hide();
$(".original").click(function() {
var divname = this.id;
$('#'+divname+'click').toggle();
});
});

$(function () {
$(".original").click(function() {
// Targeted Div Name
var divname = "#"+ $(this).attr('id') + "click";
// Toggle the div, as Id would be unique in the page
$(divname).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
</table>
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
</div>

IMHO, you should ditch the IDs altogether and just use the classes along with their indexes to achieve the desired effect much simpler, like this:
$('#main').on('click', '.original', function() {
var index = $('.original').index($(this)); // find the index of the clicked td
$('.onclick').hide().eq(index).show(); // hide all the divs then show the one at the same index as the clicked td
})
.on('click', '.close', function() {
$('.onclick').hide(); // hide all the divs when "close" is clicked
});
.onclick {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original">
one
</td>
<td style="cursor: pointer" class="original">
two
</td>
</tr>
... ...
</table>
<div id="second">
<div class="onclick">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
... ...
</div>

jquery: pull different content from different divs with same classes

Jquery noob, so don't kick too hard plz.
Got the product grid with table in product description. Table td's have the same class, and when i try to pull the content from each of them and insert into a different place, i still get the same content, where it varies in each product.
here is html
<div class="product">
<div class="product777">
<table>
<tr><td class="varimage1">content 1</td><td class="varimage2">COntent2</td></tr>
</table>
<div class="galitem1"></div>
<div class="galitem2"></div>
</div></div>
here is the piece of js code
$(".product").each(function(){
// tried this
var colorimgab = $(".varimage2").html();
//and tried this
var colorimgaa = $(this).closest(".product777").find(".varimage1").html();
$(".galitem1").html(colorimgaa);
$(".galitem2").html(colorimgab);
});

I think this could help you:
$(".product").each(function(){
var colorimgab = $(this).find(".varimage1").html();
var colorimgaa = $(this).find(".varimage2").html();
$(this).find(".galitem1").html(colorimgab);
$(this).find(".galitem2").html(colorimgaa);
});
td{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="product">
<div class="product777">
<table>
<tr>
<td class="varimage1">content 1</td>
<td class="varimage2">COntent2</td></tr>
</table>
<div class="galitem1"></div>
<div class="galitem2"></div>
</div>
</div>

Right way to get the children

I have the below code and it works but what is the right way to get table onclick of add
HTML
<div>
<h4 class="titlebar">
Skills
<small><a onclick="return false;" href="/add/" data-span="3">Add</a></small>
</h4>
<div class="body">
<table class="table">
<tbody>
<tr><td width="125"></td></tr>
</tbody>
</table>
</div>
</div>
JQuery
var TableBlock = $(this).closest('.titlebar').next().children('table');
this points to Add link

You didn't mention who is the parent of <div class="body"> and <h4 class="titlebar"> which is critical.
$(this).closest('table-parent(the missing parent)').find('table');
find is better than childern because it will work even if the table get nested in future development.
If you want only the first matched table:
.find('table').first();
//Or
.find('table:first');
Update:
Based on your question update, I would add to the parent div a class or an id:
<div class="parent" >
<h4 class="titlebar">
...
Then:
$(this).closest('div.parent').find('table');
If you can't change the DOM:
$(this).closest('h4.titlebar').parent().find('table');
Or:
$(this).closest('h4.titlebar').siblings('.body').find('table');