I am trying to add a "title" attribute to HTML td elements based on their text.
I have written the following:
$("tr.sel-rtac-first td:first-child").each(function(t,x){
var hours = "";
var text = $(x).text();
switch (text) {
case (text.includes("מרכזית-מדף פתוח") == true):
hours = "יהדות 401: א - ה 08:00 - 19:00"
break;
default: hours = "text"
}
$(x).attr("title",hours);
});
I can see in my tests that the text variable is receiving the correct text:
"
Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#
"
The text is in Hebrew, but you can clearly see that the text I am looking for is indeed part of the variable text. Yet it reverts to the default, not recognizing that the text includes that segment.
I also tried without the == ture in the code:
case (text.includes("מרכזית-מדף פתוח")):
But this doesn't work either.
A previous solution I tested was to use the .title() function, but that didn't work either (I suspect because the element doesn't have a title attribute to begin with, I am adding one).
How can I make sure that the includes function recognizes that the substring is indeed in the text?
It's your use of ´switch´ and ´case´ that is not good.
You can just write:
$("tr.sel-rtac-first td:first-child").each(function(t,x){
var hours = "";
var text = $(x).text();
if (text && text.includes("מרכזית-מדף פתוח")) {
hours = "יהדות 401: א - ה 08:00 - 19:00";
} else {
hours = "text";
}
$(x).attr("title",hours);
});
Use an if
statement instead of a switch case as @mark.hch suggested.
Concerning the buggy includes, the issue can't be reproduced with the code you provided:
const haystack = 'Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#'; const needle = 'מרכזית-מדף פתוח'; console.log(haystack.includes(needle));
The error you're observing is likely to be stemming from elsewhere.
The best way to handle this type of search is RegExp with the unicode flag: u
:
// RegEx literal syntax for unicode ex. a => U+61 => \\u{61} /\\u{5DE}\\u{5E8}\\u{5DB}\\u{5D6}\\u{5D9}\\u{5EA}\\x2D\\u{5DE}\\u{5D3}\\u{5E3} \\u{5E4}\\u{5EA}\\u{5D5}\\u{5D7}/u
When I attempted to highlight certain letters the Stack editor would skip over them. To avoid any incompatibilities derived from different languages unicode is a possible solution. Translation was possible by using the ES2015 Unicode regular expression transpiler .
In addition to the above suggestion -- the jQuery logic needs to be addressed:
When using .each()
method and referencing the current element, use $(this)
var text = $(this).text()
Methods such as .includes()
and .test()
(the Regexp method in demo) returns true
or false
. The less verbose syntax when in a condition is:
if (RegExp.test("String")) {...
Using == true
will yield the same result but in other circumstances it can change type so be careful.
$("tr td:first-child").each(function(){ var text = $(this).text(); if (/\\u{5DE}\\u{5E8}\\u{5DB}\\u{5D6}\\u{5D9}\\u{5EA}\\x2D\\u{5DE}\\u{5D3}\\u{5E3} \\u{5E4}\\u{5EA}\\u{5D5}\\u{5D7}/u.test(text)) { $(this).attr("title", "יהדות 401: א - ה 08:00 - 19:00"); } else { $(this).attr('title', text); } });
table { table-layout: fixed; width: 80vw; height: 80vh; margin: 5vh auto } td { width: 33%; } table, td { border: 1px solid #000 } td::before { content: ' '; min-height:20px; }
<table> <tr><td>Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> <tr><td>Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> <tr><td>Cen.lib-Stacks - מרכזית-מדף פתוח -#Four weeks - ארבעה שבועות#</td><td></td><td></td></tr> <tr><td>TEST</td><td></td><td></td></tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.