I am trying to determine if the src attribute of an img tag is empty, and then add a class to another element.
Below is the HTML snippet:
<span class="page-icon"><img src="" width="40" height="40" alt="Privacy" /></span>
If the src attribute of the image is empty, I want to add the class hide to the span.page-icon.
$('img[src=""]').parent().addClass('hide')
Employ an attribute filter to select img tags that have no src attribute.
$("img[src='']").parent().addClass("hide");
If you want to hide all images on a webpage, this code snippet can help:
$('img').each(function(){
var src = $(this).attr('src');
if (!src){
$(this).parent('.page-icon').addClass('hide');
}
});
$('span.page-icon img').each(function() {
console.log(this.src);
if (this.src.length <= 0) {
$(this).parent().addClass('hide');
}
else if ($(this).attr('src').length <= 0) {
$(this).parent().addClass('hide');
}
});
Explore this example on JSFiddle: http://jsfiddle.net/maniator/kk9MQ/
$("img").forEach(function()
{
if($(this).attr("src") === "")
{
$(this).parent().addClass("hide");
}
});
$('.element').find('img[src=""]').addClass('invisible');
Search for any element that contains an empty src attribute within an img tag and apply the style class invisible
To hide a span element that contains only one image tag, you can use the following code:
$('span.page-icon:has(img[src=""])').addClass('hide');
Here is a solution that should do the trick:
if ($(".page-icon img").attr("src").length == 0) {
$(".page-icon").addClass("hide");
}
I've searched through various examples, but none seem to solve my issue. I am trying to make the sidebar (section) sticky as the page scrolls. The position:sticky property works when applied to the navigation bar, so it's definitely supported by ...
Take a look at this link. There are 12 menu items, but only 4 are visible due to space constraint. The rest are hidden. Update: Jsfiddle cleaned up and removed my fiddle. I have provided an alternative link above. There was a missing jQuery part in my que ...
I'm having an issue with applying a simple shadow to a cards component. The shadow appears mirrored and out of place. My suspicion is that it might be related to the margin-bottom property, but I'm unable to pinpoint the exact reason behind this ...
I have a challenge where I need to overlay text on a video and make it draggable across the entire video. Currently, I am able to display the text over the video successfully, but when I try to drag it and then drop it, the text appears below the video and ...
I am wondering about a div element <div id="preview"> </div> Can anyone suggest a method to attach a click event specifically to the left border of this div? Your help is greatly appreciated. ...
Within my ASP.NET Core web application, I am faced with a scenario where a partial view needs to be integrated into multiple views. This partial view must be able to adapt to dynamic data based on the specific view that triggers its rendering. The area hig ...
I have created an image slider example, but I'm facing a styling issue when using images of different dimensions. The element leaving the array is positioned absolutely for smooth transitions, but this causes the image to move up. I am trying to vert ...
I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...
When looking at the first image, it appears that the material-UI menu position is working correctly. However, when we change the button position to align-right, the menu position shifts slightly to the left, not perfectly aligning with the right side as in ...
I'm having trouble getting my progress bar to update in Safari (8.0). While uploading a file, the progress bar updates automatically in Firefox and Chrome, but not in Safari. I suspect this may be due to Safari not handling synchronous events, causing ...
Within an html table, I've compiled a list of camera names. Should you wish to make any edits, simply click on the edit button provided. Upon clicking the edit button, a form will open up along with various other options, allowing you to change the n ...
I'm currently working on a webpage that includes a link to an anchor, which should be a straightforward case. The link code looks something like this: <a href="#target">Link</a> And the anchor code looks like this: <a name=" ...
I have a question about appending and replacing div elements. I am currently using the following code: $('.toggle_questions').appendTo('#'+sectionId).show(); While this works perfectly to append my div with the class .toggle_questions ...
Within my HTML document, the following code is present: <div ng-repeat="selection in selections" style="margin-left:{{marginLeft}}%;width:{{progress}}%;background-color:{{selection}}"> </div> In my controller, I have implemented function ...
I want to implement a coverflow using the plugin found at this link: Here is an example of how it can be done: <div class="coverflow"> <div class="cover">A</div> <div class="cover">B</div> ... <div class=" ...
Can anyone help me figure out how to move my menu bar to the opposite side of my logo? I attempted using the position relative in CSS but it didn't reposition correctly. I've included the position:relative in the CSS code of my HTML index file, ...
I am currently working on an angular application with a navigation bar composed of anchor tags. When the user logs in, I have an ngIf directive to display my profile icon with dropdown options. However, I am facing challenges in styling it correctly. I aim ...
When I click a button, I send a key to the controller and retrieve my lists using JSON. The array inside my lists serves as my children in my jstree. $("#btnSearch").on("click", function () { alert("I'm also here"); $.ajax({ ...
I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...
Here is my line of JavaScript code: $('#name').show(); And this is my webdriver code line: wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("name"))).sendKeys("Some Name"); When running the test, I encountered an exception: Web ...