<tbody id="items">
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
<tr><td>Item 5</td></tr>
<tr><td><a>1</a>
<a>2</a>
<a class="a3">3</a>
</td></tr>
</tbody>
Is there a way to make all anchor tags within the last <td> have an opacity of 0.5, except for the third anchor tag?
var targetElement = $('.a3').closest('td')
$("td").not(targetElement).addClass('opacity')//apply opacity
You have the option to assign a specific CSS class
Set opacity for children of td excluding those with the class a3
Utilize .each()
Description: Iterate over a jQuery object, running a function for each matched element.
To identify matches and then apply the class
var targetElement = $('.a3')
$("td").each(function(index) {
console.log($(this).find('a').length)
if ($(this).find('a').length > 0) {
$(this).children().not(targetElement).addClass('opacity') //apply opacity
} else {
$(this).addClass('opacity') //apply opacity here
}
}).opacity {
color: red;
opacity: .5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="items">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
</tr>
<tr>
<td>Item 5</td>
</tr>
<tr>
<td><a>1</a>
<a>2</a>
<a class="a3">3</a>
</td>
</tr>
</table>If the transparency of a td is set to 0.5, reversing this effect in a nested component is not possible (restoring it to an opacity of 1).
In CSS, you cannot target "td elements that do not contain a tags."
My solution would be to enclose the cell contents within a <span> and apply the following styles:
td span, td a {opacity: 0.5;}
.a3 {opacity: 0.1;}
It may seem a bit lengthy, but this is an excellent solution using only CSS
HTML
<table>
<tbody id="items">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
</tr>
<tr>
<td>Item 5</td>
</tr>
<tr>
<td><a>1</a>
<a>2</a>
<a class="a3">3</a>
</td>
</tr>
</tbody>
</table>
CSS
tr td,
tr:last-child td a {
opacity: .5
}
tr:last-child td,
tr:last-child td a.a3 {
opacity: 1
}
Adjust the opacity of the last child to 1 and the opacity of the last list item to 0.5, except for the last one
Check out a live example here: https://jsfiddle.net/4p3dfqye/
I am looking to create a tooltip that displays its content after clicking on the tooltip tip icon. Currently, it only works on hover, but I want it to be clickable and mobile responsive. Desktop design should resemble: https://i.sstatic.net/FQPyt.png Mob ...
I am looking to calculate the area by multiplying width and height entered into input fields, and then display the result. Any guidance would be greatly appreciated. Thank you! Here is my current code. const width = document.querySelector("#width"); con ...
Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...
While attempting to navigate to a page in reactjs and pass parameters using the useNavigate hook, I encounter an unexpected token error as soon as I include the navigation within the anchor tag. <a onClick={() ={ ...
I'm trying to create a horizontal scroller with margins between each item and consistent margins at both ends. However, I'm noticing that the margin at the end of the container seems to be disappearing somehow. Is there a way to maintain the mar ...
Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...
I'm encountering an issue where the inputs in my beginform are not being auto-posted successfully. Their values do not reach the model or controller and remain null (breakpoints are never hit). What could possibly be causing this? @model project.Mo ...
Currently in the process of eliminating the jQuery dependency from my AngularJS project, I encountered the following code as part of a spec within my codebase: beforeEach(inject(function($rootScope, _$compile_) { scope = $rootScope; $compile = _$c ...
Utilizing Bootstrap allows for the adjustment of paragraph font sizes to appear quite large, mimicking the size and style of a heading without the need for an actual heading level HTML tag. I am hesitant to use a genuine <H2> tag to alter the visual ...
I've been trying to access and retrieve weather data from OpenWeather using their API, but unfortunately, I'm facing some difficulties in getting it to work. It seems like there might be an issue with the way I am fetching the JSON data. To quer ...
When the user clicks on purchase and the cart is empty, there should be an alert. However, it seems that no response is triggered. Upon running the program, an error message appears stating that it cannot read the property of addEventListener which is unde ...
Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...
I am faced with a challenge of arranging 127 divs to form a hexagon shape similar to the example below: for (i = 1; i <= 127; i++) { var div = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild( ...
In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...
Encountering problems with IE 10. View the code here. While on the latest Chrome and Firefox, all text appears in a single line, IE displays it differently. Other modern browsers produce a different result altogether. ...
From my understanding, I have generated a JSON object using PHP's json_encode function and displayed it using echo. As a result, I can directly access this object in JavaScript as an object. Here is an example: .done(function(response) { var ...
The approach I am using to handle the data sent with jquery.ajax involves sending an empty string by default. Whenever there is a change, I monitor the input for changes and resend the data. Everything seems to work fine in the console, but in PHP, $this-& ...
I am looking to format a question along with multiple options in a text box, similar to how it is done in a Word file or plain text. Once saved, I want the questions to be displayed in a list and the options organized in a table. How can I extract the ques ...
Here is the code snippet. I am encountering an issue where pressing the button does not trigger any action, while I simply want to ensure that the AJAX functionality is working properly. The expected behavior is for an alert message to be displayed when th ...
I have been attempting to implement an autocomplete feature in a textbox that fetches company names. Despite successfully retrieving records and receiving them in the success function via Ajax, I am not seeing any suggested autocompletions in the textbox. ...