I'm trying to put a <span> in an other <span> in the title of JQuery's modal but it doesn't work.
Here's my HTML code :
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
And I want to put a <span class="glyphicon glyphicon-info-sign"></span> inside the ui-dialog-title <span>.
I tried to do it like this :
$(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
And it works !
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">
<span class="glyphicon glyphicon-info-sign"></span>Info title
</span>
...
</div>
<div id="1">
But, I will have multiple <span> with the class ui-dialog-title in my document and I want to access this <span> using the id of the next <div>.
I tried this :
$("#"+myId).prev("div").first("span").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
But the glyphicon <span> was placed BEFORE ui-dialog-title <span> :
<div class="ui-dialog-titlebar...">
<span class="glyphicon glyphicon-info-sign"></span>
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
I don't understand why it is placed here because with the other method, it works.
I hope you will understand my problem and thank you for your help !
You can do:
$("#"+myId).prev("div").find(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
Working example
Structure:
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title"><span class="glyphicon glyphicon-info-sign"></span>Info title</span>
</div>
Related
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileDoc.doc">fileDoc.doc</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
...
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileJpeg.jpeg">fileJpeg.jpeg</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
This is my case, i want to select the " .ant-upload-list-item-card-actions > a" when the class "ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" contains fileDoc.doc
I made this
candidateUploadFileButton = '#filesUpload';
candidateUploadRemoveButton = '.ant-upload-list-item-card-actions > a';
cy.get(this.candidateUploadFileButton, {force: true}).contains(fileName);
cy.get(this.candidateUploadRemoveButton).click();
It works for a single input only for a single div class, if there two classes like in the previously example , it doesn't work beacuse it says there are multiple values
I added this picture, maybe it will help what i want to do, i want to press Remove button for the file named "fileDoc.doc"
https://i.stack.imgur.com/voQqp.png
Refer here:
As per your markup, you can use this:
cy.contains(fileName).next().find('> a').click()
I have the following code:
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
This content box is generated. I want to hide it if there's no content being generated on the backend. How do I do it? I already tried
if ($('.contentMachine').is(':empty')) {
$('.contentMachine').remove();
}
But it's still not hiding the div's
Here's the fiddle
You need to removed matched elements, so :empty selector with class selector to get the reference of empty elements then apply .remove() method
$('.contentMachine:empty').remove()
You can use pseudo selector empty:
$('.contentMachine:empty').remove();
Update:
You can retrieve the content of contentMachine as a text then play with the result:
$('.contentMachine').each(function () {
var text = $(this).text();
text = text.replace(/(\n|\s)*/mg, '');
if (text === '') {
$(this).remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbarsd">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestampd" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-textd">With content</span>
</div>
</div>
Last update:
You can achieve it by checking all empty element into .contentMachine:
$('.contentMachine :empty').remove();
Demo
Try this:
content = $('.contentMachine').text();
content = $.trim(content);
if (content.length == 0) {
$('.contentMachine').remove();
}
if .contentMachine this div completely has no text anywhere it will remove by this script. I do it with help of rejex.
var regex = "/^.+\s.+$/" ;
$(document).ready(function(){
console.log($(".contentMachine").text().match(regex));
if ($(".contentMachine").text().match(regex) ==null|| $(".contentMachine").text().match(regex) == 0) {
$(".contentMachine").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div></div>
Try this one
jQuery( '.contentMachine:empty' ).remove();
Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`
in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()
Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.
Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work
I would like to use the url address bar(IE7 nad 8), for simulating a tab click.
Some parts of the html section for the webpage as follows. for the tabscroller, debugTabs-tabScroller, when the page opens, always the tab "Main" is selected. I would like to use the address url bar, using a js code so that "Debug Probe", tab is clicked. I tried the below(after the page is loaded) but doesnt seem to work.
javascript:document.getElementById('debugTabs-Probe-tab').click()
part of the html section.
var debugTabs = new dptabs.TabSet(
"debugTabs",
["Main","Probe","Conformance"],
[]
);
.
....
...
<div id="genericDetailTabs" class="genericDetailTabs">
<div id="debugTabs-tabSet" class="tabSet">
<div id="debugTabs-tabScrollLeftArrow" class="tabScrollLeftArrow" onmouseover="debugTabs.startScroll(1);" onmouseout="debugTabs.stopScroll()" onmousedown="debugTabs.setScrollSpeed(2);" onmouseup="debugTabs.setScrollSpeed()">
</div>
<div id="debugTabs-tabScroller" class="tabScroller">
<div class="tab" id="debugTabs-Main-tab" onclick="debugTabs.clickTab('Main');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Main</span>
</span>
</span>
</div>
<div class="tab" id="debugTabs-Probe-tab" onclick="debugTabs.clickTab('Probe');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Debug Probe</span>
</span>
</span>
</div>
<div class="tab" id="debugTabs-Conformance-tab" onclick="debugTabs.clickTab('Conformance');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Conformance Validation</span>
</span>
</span>
</div>
</div>
<div id="debugTabs-tabScrollRightArrow" class="tabScrollRightArrow" onmouseover="debugTabs.startScroll(-1);" onmouseout="debugTabs.stopScroll()" onmousedown="debugTabs.setScrollSpeed(2);" onmouseup="debugTabs.setScrollSpeed()">
</div>
</div>
</div>
I am needing help forming a jquery selector to return elements which are missing a particular child element.
Given the following HTML fragment:
<div id="rack1" class="rack">
<span id="rackunit1" class="rackspace">
<span id="component1">BoxA</span>
<span id="label1">Space A</span>
</span>
<span id="rackunit2" class="rackspace">
<span id="label2">Space B</span>
</span>
<span id="rackunit3" class="rackspace">
<span id="component2">BoxA</span>
<span id="label3">Space C</span>
</span>
</div>
<div id="rack2" class="rack">
<span id="rackunit4" class="rackspace">
<span id="component3">BoxC</span>
<span id="label4">Space D</span>
</span>
<span id="rackunit5" class="rackspace">
<span id="label5">Space E</span>
</span>
<span id="rackunit6" class="rackspace">
<span id="component4">BoxD</span>
<span id="label6">Space F</span>
</span>
</div>
Find for me the rackunit spans with NO component span.
Thus far I have:
$(".rack .rackspace") to get me all of the rackunit spans, not sure how to either exclude those with a component span or select only those without one...
I guess the following should work:
$(".rack .rackspace:not(:has(span[id^=component]))"). ...
DEMO: http://jsfiddle.net/WbCzj/
You could use .filter():
$('.rack .rackspace').filter(function() {
return $(this).find('span[id^="component"]').length === 0;
});