0

I am trying to translate some html elements based on the interface language of a system. The structure is simple and consists of a list, with a elements inside each il element, like so:

<li class="toolbar">
<a>"Some Text"</a>
</il>

I made a selection based on this structure and everything works as it should:

$(".toolbar a").each(function(){
    if ($(this).text().includes("Some Text")) {
        $(this).text("טקסט כלשהו");

However, the interface is responsive, and when the mobile version kicks in, the structure slightly changes, and now a ::before element is suddenly added, like so:

<li class="toolbar">
<a>::before "Some Text"</a>
</il>

This ::before statement makes my code not read the a element correctly, and the text does not change.

Because I am using an .each function to translate all elements together, I can't use CSS:before statements, because I will have to define each one separately, which I am trying to avoid.

How can I select the text in the a element despite the ::before? I tried adding it to the selector, like so:

$(".toolbar a::before").each(function(){
    if ($(this).text().includes("Some Text")) {
        $(this).text("טקסט כלשהו");

But to no avail. I searched online for an answer, but I keep getting references to CSS "Before" selector.

Nimrod Yanai
  • 777
  • 2
  • 8
  • 30
  • Perhaps use `innerHTML` instead? – Paulie_D Jul 16 '19 at 15:01
  • @Paulie_D I'm afraid that doesn't work – Nimrod Yanai Jul 16 '19 at 15:07
  • 1
    This is one of the many reasons it's generally preferred to do translation/localization on the back end, rather than using JavaScript and the DOM... Nonetheless, the duplicate shows a workaround to manipulation of the content of a pseudo element. – Heretic Monkey Jul 16 '19 at 15:18
  • @HereticMonkey Thanks, but it's not exactly the same. This solution works for singular selections, while I have a list of items. I am using an .each command to translate each one separately, which I won't be able to do with a css solution. I'll have to write each one manually, which I am trying to avoid if possible (if not, I might have to implement that solution anyway). – Nimrod Yanai Jul 16 '19 at 15:22
  • I'm not sure how this wouldn't work with the accepted answer. The only difference between that and yours is that the content, instead of being stored in CSS, is stored in a `data-` attribute. Which would make it easier to target with jQuery: `$('.toolbar a[data-whatever*="Some Text"]').each(() => $(this).text("Some Translated Text"));`. – Heretic Monkey Jul 16 '19 at 15:32
  • @HereticMonkey But wouldn't I need a different entry for each one in the CSS? I'll need a way to differentiate between each li element in the CSS file. – Nimrod Yanai Jul 16 '19 at 15:58
  • Your question here indicates you already have the content in the CSS (since you're asking how to retrieve and modify that content via jQuery). Read that answer again, and you'll find that the CSS is actually simplified such that it pulls the content from the `data-` attribute in the HTML, so the content you need to translate is no longer in the CSS. – Heretic Monkey Jul 17 '19 at 14:05

0 Answers0