Html - Using JavaScript how do I enclose the text of an <a> tag with a <span> if a parent <div> has a certain class

user28293600
November 14, 2024
85 views
0 votes
2 Answers

I have the following code

<div class="team-grid">
    <div class="cssgrid-wrapper">
        <div class="cssgrid-container">
            <div class="tmb"> 
                <div class="t-inside "> 
                    <div class="t-entry-text">
                        <div class="t-entry-text-tc"> 
                            <div class="t-entry"> 
                                <p class="t-entry-meta"> 
                                    <span class="t-entry-category t-entry-tax"> 
                                        <a href="#">Category one</a>
                                    </span> 
                                </p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
        <div class="tmb"> 
            <div class="t-inside "> 
                <div class="t-entry-text">
                    <div class="t-entry-text-tc"> 
                        <div class="t-entry"> 
                            <p class="t-entry-meta"> 
                                <span class="t-entry-category t-entry-tax"> 
                                    <a href="#">Category two</a>
                                </span> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </div>
</div>

and I’d like to use javascript to enclose every A tag’s text with SPAN that has the class ‘hide’ if the a tag has a grandparent DIV with the class ‘team-grid’ and parent SPAN with the class ‘t-entry-category’.

So in the above example the result would be

<div class="team-grid">
    <div class="cssgrid-wrapper">
        <div class="cssgrid-container">
            <div class="tmb"> 
                <div class="t-inside "> 
                    <div class="t-entry-text">
                        <div class="t-entry-text-tc"> 
                            <div class="t-entry"> 
                                <p class="t-entry-meta"> 
                                    <span class="t-entry-category t-entry-tax"> 
                                        <a href="#"><span class="hide">Category one</span></a>
                                    </span> 
                                </p> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div>
        </div>
        <div class="tmb"> 
            <div class="t-inside "> 
                <div class="t-entry-text">
                    <div class="t-entry-text-tc"> 
                        <div class="t-entry"> 
                            <p class="t-entry-meta"> 
                                <span class="t-entry-category t-entry-tax"> 
                                    <a href="#"><span class="hide">Category two</span></a>
                                </span> 
                            </p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div>
    </div>
</div>

any help would be appreciated.

Answers

- RaflyRizqullahYusuf
- November 14, 2024 at 9:18 am
- 0 votes
0
```
document.querySelectorAll('.team-grid .t-entry-category > a').forEach(a => {
    a.innerHTML = `<span class="hide">${a.textContent}</span>`;
});
```
Login or Signup to reply.

- Boguz
- November 14, 2024 at 11:20 am
- 0 votes
0
I think you could do this with CSS, and hide the whole <a>. If the <a> does not have visible content, it will be a problem for accessibility.

I think you can do that with something like this:
```
div.team-grid span.t-entry-category > a { display: none; }
```
This CSS checks for a SPAN direct parent with the class t-entry-category, which is itself inside a DIV with the class team-grid. If so, the a element with get display: none
Login or Signup to reply.