I want to use the Placeholder element
<div class="ui placeholder">
<div class="image"></div>
</div>
But I can't figure out if I have to replace manually the content on it or there's a function out-of-the-box.
I have read the documentation but I haven't found anything for that.
No, there's no function out-of-the-box - you'd have to manually replace the contents of the placeholder elements, removing the placeholder class as you go.
Related
How can i find all element that do not have a data- attribute without using jQuery, i have seen similar to my question but they are all using jQuery. check here
I need to exclude in my forEach the data-last attribute with the value of yes only.
Is there any method how to do that by using vanilla JS only? Thanks!
I've tried something like this but it is not working..
document.querySelectorAll(".form-step not:[data-last="yes"]")
<div class="form-step" data-last="no"> Stay </div>
<div class="form-step" data-last="no"> Stay </div>
<div class="form-step" data-last="yes"> Hide </div>
Thank you for clarifying! Based on your need, you’re very close. The syntax for :not() is just slightly different. Here’s the tweaked code:
document.querySelectorAll(‘.form-step:not([data-last="yes"])’)
Besides the : and () changes, notice the lack of a space, since you need it to apply to that element and not a descendent. I also had to change one of the sets of quotes so they don’t mess with each other, but I don’t believe it matters which is changed.
If you can't hardcode the data attribute to exclude - it isn't possible with a single selector only. You'll need to iterate over each element and filter out those with anything in the dataset.
const formStepsWithutAnyData = [...document.querySelectorAll('.form-step')]
.filter(div => Object.keys(div.dataset).length === 0);
console.log(formStepsWithutAnyData.length);
formStepsWithutAnyData[0].style.backgroundColor = 'yellow';
<div class="form-step" data-last="no"> Stay </div>
<div class="form-step" data-last="no"> Stay </div>
<div class="form-step" data-last="yes"> Hide </div>
<div class="form-step"> no data attribute </div>
If you can hardcode the attribute to exclude, all you need is .form-step:not([data-last]) or the equivalent.
document.querySelectorAll('.form-step')
.forEach(function(element) {
if (!element.hasAttribute('data-last')) {
console.log(element);
}
});
<div class="form-step" data-last="no"> Stay </div>
<div class="form-step" data-last="no"> Stay </div>
<div class="form-step" data-last="yes"> Hide </div>
<div class="form-step" > No Data attribute </div>
I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');
Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");
I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.
$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>
I would like to use the jQuery before() with JQuery 1.3.2, is this possible?
I have a div like this:
<div id="wrapper">
CONTENT HERE
</div>
That I would like to use jQuery before() to add a container around it.
<div class="container">
<div id="wrapper">
CONTENT HERE
</div>
</div>
I do not have access to the HTML, this is in a SaaS platform that determines all of that stuff. So, using jQuery to insert a new div around the wrapper seems like the way to go.
Thanks!
Look into the jquery.wrap method.
$('#wrapper').wrap('<div class="content"></div>');
As mentioned by the others in the comments above.
I have this :
<div class="div1">
<div class="div2">
<div class="div3">
<div>
<input></input>
</div>
<input></input>
</div>
</div>
</div>
I want to get the input tag with JQuery and use Css.
I tried this :
$('.div1 :input').css('background-color','blue');
but it doesn't work.
The problem is that there is an other input tag?
Edit :
Sorry for not having detailed.
I use a Date Control Form from Nintex and his input tag already has css by default. Problem solved!
As you have updated, via comment, that you just want the first input, use either the first() method on the search result, or use the :first selector. Examples of both below:
$('.div1 :input').first().css('background-color','blue');
http://jsfiddle.net/TrueBlueAussie/3LftU/2/
or
$('.div1 :input:first').css('background-color','blue');
http://jsfiddle.net/TrueBlueAussie/3LftU/3/
As you mentioned in your comment that a plugin has an input field whose css you want to change which already is their, you can do something like this
$('.div1 :input').style('background-color','blue','important');
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );