Develop Reference

How to get nested js selectors like td?

I need to get all selector that match the condition so I can iterate thru it later on. My code does not return any values. Probably syntax is wrong so I would appreciate if you help me (haven't written lots in js).
Here is the html
function restore_hp(){
var percent_restore = document.querySelectorAll("table.table.table-condensed.table-top-spacing > tr > td[2]");
percent_restore.forEach((td)=>{
console.log(td.innerText)
});
}

You are probably looking for td:nth-child(2) at the end of your selector.
Your current td[2] would select such a table cell: <td 2="some-attribute-value">...</td>. Notice that this would be invalid HTML because a) 2 is an invalid attribut identifier (cannot start with a number) and b) even if it in general would be valid syntax it wouldn't be known for HTMLTableCellElement, and thus again, invalid HTML.
2nd issue:
> selects direct children only. tr is not a direct child of your table (it never is, missing tbody is auto-inserted by all browsers).

What you want is something called :nth-child pseudo selector. Learn more from the below link-
https://www.w3schools.com/cssref/sel_nth-child.asp
SO your function may be like-
function restore_hp(){
var percent_restore = document.querySelectorAll("table.table.table-condensed.table-top-spacing tr td:nth-child(2)");
percent_restore.forEach((td)=>{
console.log(td.innerText)
});
}
Codepen: https://codepen.io/ashfaq_haq/pen/WNNOYRR

You can add a HTML class to the elements you want to manipulate and simply query on the class :
...
<tr>
<td>Some text</td>
<td class="my-custom-class">Some other text</td>
</tr>
...
var percent_restore = document.querySelectorAll(".my-custom-class");
percent_restore.forEach((td)=>{
console.log(td.innerText)
});
That way you're not lost in your HTML tree.

Removing <tr> from table without :contains()

Okay,
This may sound easier than it is, I need to use either Javascript or jQuery to remove a <tr> from a table, I don't know what row this <tr> will be, nor do i know which <tr> I will be removing and the only way I can find out which <tr> to remove is from the text inside the child's <td>.
I cannot use the :contains() selector from jQuery as I'm using ajax to get the elements and it just seems broken.
$("td:contains(var)").parent().remove();
just gives me a DOMexception error.
Is there a way I can loop through all the <td>'s in a table and check the text contents of them?

This will check the text of each one:
$('tr').each(function() {
var $tds = $(this).find('td');
$tds.each(function() {
if ($(this).text() === "some text") {
$(this).parent().remove()
}
});
})

Replace the text inside the td without touching the other child elements

I have this:
<td class="cant_formula numeric">
0.007
<input type="hidden" value="0.015" class="cant_formula"/>
</td>
I want to replace the text inside it, I tried these ways:
$('td.cant_formula.numeric').contents().first()[0].textContent='fsdfwffwwfwf';
but it doest not work!!
Here is the fiddle: https://jsfiddle.net/gp5gmmgx/
Can you help me, What Im doing wrong??

Look at this https://jsfiddle.net/gp5gmmgx/2/
$('td.cant_formula.numeric').contents()
.filter(function() {
return this.nodeType == 3; //Node.TEXT_NODE
})
.get(0).nodeValue = 'test';
table element is required else td elements aren't selected;
about selecting text nodes read https://stackoverflow.com/a/298758/3349900.

jsFiddle doesn't seem to work with that version of jQuery. (I can't even get a simple alert to work.)
Upgrade to at least v 1.9.1
Also, td elements must be within tr elements, which must be within a table.
https://jsfiddle.net/0rnLa9j1/

Try
$('td.cant_formula.numeric').text("text");
Actually after testing, this replaces all the contents of the td not just the text. I should have listened to my gut and double checked before answering, apologies!

Comparing "this" object with Object in DOM Array

This question is the root cause for my question.
Hide all next tr td until next tr th
As already two answers being posted , I thought of trying something different
Javascript:
$(function(){
var thList = $('td');
$('td').click(function(){
for( i =0; i < thList.length;i++){
// What to do here
}
});
});
HTML:
<table border="2">
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<table>
What am doing here is
Assigning click event to <TH> element. And on load , am getting all the <TH> in the DOM in an Array.
Now, my logic is. Iterate the for loop and if the clicked TH is not the one in the for loop, then hide it.
What i tried is
if ( thList[i] != $(this)) { thList[i].style.display = 'none' }
But this does not seem to be working. what code I need to put there to compare the object

Besides the fact, that you example markup does not contain any th-elements, you could try the following:
$('td').click(function(){
var $tdList = $('td').not(this); // <- get all th's and exlude the clicked element
$tdList.each(function(){this.style.display = 'none'; });
});
or even better, use jQuery, you don't need a each wrapper then:
$tdList.hide();
Since jQuery saves you a lot of work, try to use it whenever you can - use the each() instead of for-loops and use .css() (or even more dedicated methods like .hide()) instead of the native .style - this should shorten your code significantly.

You can use:
thList.click(function() {
thList.not(this).css("display", "none");
});
For performance reason you could delegate the event instead:
$("#yourtable").on("click", "th", function(event) {
thList.not(event.target).css("display", "none");
});
I didn't test it, but should works.
However I'm curious about the UI: if the TH are hidden in this way, they can't be displayed anymore after the first click of any of them.

1-You $(this) is diferent of this once is a jquery object
2-You dont have a TH element here is the code similar that you want but whit td's
$(function(){
var tdList = $('td');
$('td').click(function(){
tdList.hide();
$(this).show();
//OR tdList.not(this).hide();
});
});

When you are accessing the items in a jQuery object, you get them as DOM elements, not as new jQuery objects. So, you should compare it to the element reference directly, not wrap the element reference in a jQuery object:
for (i = 0; i < thList.length; i++) {
if ( thList[i] != this) { thList[i].style.display = 'none' }
}
You can also use the not method to get a collection without the current element:
thList.not(this).each(function(){ this.style.display = 'none'; });
Of course, using the css method it becomes even simpler:
thList.not(this).css('display', 'none');
Word of caution: The cells in tables are not really separate elements that you can just hide without affecting the other cells in the table. The table can show unexpected behaviour when you hide cells in it.

Getting total length of an index in each()

I want to get an unknown (changing) # of rows from a table, between the 1st cell and the last 3. I'm using jQuery's each and don't know why $(this).length doesn't give the total length of the index.
jQuery:
$("#parent table:first tr").each(function(i){
var goodlng = $(this).parent().children("tr").length -1; //this works
var badlng = $(this).length -1; //this doesn't! (always == -1)
});
Is the goodlng good practice? it seems like a hack to have to go to parent and then back to children.
Here is a jsfiddle (have console.log()) open.
Example HTML:
<div id="parent">
<table>
<tr>
<td>unwanted 1</td>
</tr>
<tr>
<td>wanted!</td>
</tr>
<tr>
<td>unwanted2</td>
</tr>
</table>
</div>
tl;dr: Why doesn't $(this).length == $(this).parent().children("tr").length inside of an each function. and is there another better way of doing this.

Your question says "cells", but it seems like you're trying to get the number of rows.
If you really want it inside the .each(), you could use the siblings()[docs] method and the andSelf()[docs] method.
$(this).siblings().andSelf().length
But if the rows aren't changing, why do it repetitively?
Or if they are changing, I'd just use the native rows property on the table to get the length.
var table = $("#parent table:first");
table.find('tr').each(function() {
var len = table[0].rows.length;
});

Actually, this $(this).parent().children("tr").length is the correct way of handling things. this, in the context above is a reference to the tr node itself. tr.length = the length of the tr. tr.parent().children("tr"), on the other hand is a list of the node's siblings, so tr.parent().children("tr").length is the number of siblings.

This is the context of EACH element, not all of them. Therefore, this is only ONE tr at a time. That is why the length does not have all the elements.

The each() function is unaware of the collection of elements that it is working on. It is dealing with a single element at all times. Thats why when you go to the parent and ask for all children you get the right answer.
$(this)
simply refers to the current tr element that you are dealing with, not a collection of them.