I am trying to find a way to use jQuery to get the first empty div with a certain class. I tried this:
$(".box[html='']").
but it didn't work. Is there an easy way to do this?
That syntax only works for attributes. For HTML contents, you can use .filter():
$('.box').filter(function () {
return $.trim($(this).html()) === '';
}).eq(0);
Edit: The problem with :empty is that line-breaks and spaces are not empty. So:
<div> </div>
<div>
</div>
... won't match.
This should work:
$('.box:empty:first')
http://api.jquery.com/empty-selector/
How about this:
You html:
<div class="empty"></div>
<div class="empty"></div>
your script:
$(document).ready(function(){
$(".empty:empty:first").html("JJJJ");
});
Check this
http://jsfiddle.net/y4Ef2/
var boxEq;
$('div.box').each(function(i,obj){
if (boxEq === void(0)) {
if ($(obj).html() === '') {
boxEq = i;
break;
}
}
});
// this is your div
$('div.box').eq(boxEq);
Try this one:
$('.box').each(function(){
if($(this).text().length == 0)
//box is empty
});
$("div.box:empty").eq(0)
added .eq(0) since you said first empty
Related
How to find and remove a specific text in a html file?
I already found a code, but I think it doesn't work if there are charkters like "/" or "()" in the HTML-File.
My HTML-Code
<label>Text 1 (Blue/White/Green)</label>
My Script
$("label").children().each(function() {
$(this).html($(this).html().replace(/'(Blue/White/Green)'/g,""));
});
You just need to escape the slashes (and parens) in the regex, as well as remove the apostrophes. Secondarily, you're looking for children that don't exist, as the text is not within a child node, but the content of the label node, so removing the .children() filter will make it work:
$("label").each(function() {
$(this).html($(this).html().replace(/\(Blue\/White\/Green\)/g,""));
});
If you aren't interested in using a regex, you can also use the replace method with a string instead, though as written this will only replace the first instance:
$("label").each(function() {
$(this).html($(this).html().replace('(Blue/White/Green)',""));
});
You've to escape the slashes / and parentheses () using the antislash \ and you should also remove the single quotes ' and .children() also :
$("label").each(function() {
$(this).html($(this).html().replace(/\(Blue\/White\/Green\)/g,""));
});
Hope this helps.
Working snippet :
$("label").each(function() {
$(this).html($(this).html().replace(/\(Blue\/White\/Green\)/g,""));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Text 1 (Blue/White/Green)</label>
You should remove the children(). you need to iterate on the label elements. not on its children
$("label").each(function() {
$(this).html($(this).html().replace(/\(Blue\/White\/Green\)/g,""));
});
this should work
https://jsfiddle.net/L4b2m3a5/1/
Here you go!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('label').each(function() {
var text = $(this).text();
$(this).text(text.replace('(Blue/White/Green)', 'NOTHING'));
});
});
</script>
</head>
<body>
<label>Text 1 (Blue/White/Green)</label>
</body>
$(":contains('text-to-remove')").contents().filter(function () {
return (this.nodeType == 3 && $.trim(this.nodeValue) == 'text-to-remove');
}).remove();
from another poster
Im using the below code to replace the text within the h1 tag, but its not getting effected. I want to replace "sample" to "new sample". I'm doing wrong?
<div class="content">
<h2>sample</h2>
</div>
var t = jQuery('.content');
t.children("h2").each(function() {
var contents = jQuery(this).contents();
jQuery(this).replaceWith(new sample);
});
use .html() to set html.try this:
$('.content h2').html('new sample');
Working Demo
If you want to replace some part of content then try this:
jQuery('.content h2').each(function(i, v) {
$v = $(v);
$v.html($v.html().replace('sample', 'new sample'));
});
jsFiddle
Use jQuery's .text()
$(".content h2").text("new sample");
FIDDLE
You can do that without jQuery:
var elem = document.getElementsByTagName('h2')[0];
elem.innerHTML = "New Value";
Set .text()
t.children("h2").text('new sample'));
If you want to set .html() content
t.children("h2").html('new sample'));
Child Selector (“parent > child”)
$('.content > h2').html('new sample');
I have a problem that seems at first like a total no-brainer and an easy task.
I have a JavaScript plugin on my page that generates a Table Of Contents list to the sidebar of my Wordpress pages. My purpose is to hide the text widget element of the #toc when the list within it has no elements. I'm trying to solve it using jQuery but no luck.
The HTML:
<div class="textwidget">
<div id="toc">
<ul></ul>
</div>
</div>
The JavaScript:
jQuery(document).ready(function ($) {
if (!$('#toc').children('ul').has('li')) {
$('#toc').parent().hide();
}
});
My script should hide this specific #toc's parent, because it has no child <li> elements, but it doesn't. Instead, when I remove the ! from my if sentence, the script hides my list, as if it had something in it. It then also hides the lists that actually have elements in them. Am I totally missing something here?
Simply use this:
$(document).ready(function () {
if ($('#toc ul li').length < 1) {
$('#toc').parent().hide();
}
});
<script>
$(document).ready(function(){
$("#YourListID").hide();
var a = $("#YourListID li").length();
if (a > 0 ) {
$("#YourListID").show();
}
else {
$("#YourListID").hide();
}
});
</script>
You can try one of the following:
1) Give the UL an ID and check it's HTML. Ex:
var ulHtml = $("#myULElement").html();
if(ulHtml == ''){
$('#toc').parent.hide();
}
2) Do the same as above but with a relative path, like:
var ulHtml = $("#toc ul").html();
//etc...
See if that works. If it does, we can elaborate on it further.
This works:
if(!$('#toc').has('ul li').length) {
$('#toc').closest('.textwidget').hide();
}
Working jsfiddle here
What you need to do is add .length to your testing statement.
jQuery(document).ready(function ($) {
if (!$('#toc').children('ul').has('li').length) {
$('#toc').parent().hide();
}
});
Working Fiddle
Source: http://api.jquery.com/has/
Use length to evaluate if there are <li> or not.
DEMO
<div class="textwidget">
<div id="toc">
<ul></ul>
</div>
</div>
if ($('#toc ul li').length<1) {
$('#toc').parent().hide();
}
inside $(document).ready check for this
if($.trim($('#toc ul').html()).length == 0){
$('#toc').parent().hide();
}
as case may arise
<ul></ul>
<ul>
</ul>
<div class="myClass1">
<span>tesutokana</span>
</div>
<div class="myClass2">
<span>tesutoroma</span>
</div>
<div class="myClass1">
<span>-</span>
</div>
<div class="myClass2">
<span>-</span>
</div>
<div class="myClass1">
<span>-</span>
</div>
<div class="myClass2">
<span>-</span>
</div>
I want to remove all divs that are just <span>-</span> from classes myClass1 and myClass2. Tried with .each() but I can't seem to get the hang of it, mostly with what are the arguments of the function I should call. Any help?
You can do it by comparing the content of the span in a condition:
$('.myClass1, .myClass2').each(function(){
var mySpan = $(this).find('span');
if(mySpan.text() == '-'){
mySpan.closest('div').remove();
}
});
Living example: http://jsfiddle.net/8CNkW/2/
Update:
This one doesn't have the problem with texts containing the - string such as ---, test-test etc.
Plush, is 80% faster than the contains option named in other answers: http://jsperf.com/just-a-demo
Use the :contains selector
$("div span:contains(-)").remove();
Remove the whole div:
$("div span:contains(-)").parent().remove();
JSFiddle
Note that this is a quick and dirty solution as it'll remove all spans that contain a -
You could use .filter() to do the filtering.
Just like that:
$('.myClass1,.myClass2').filter(function(i, el){ return el.innerHTML.trim() == '<span>-</span>' }).remove()
here is a simple solution. fiddle
var doc = document.body;
doc.innerHTML = doc.innerHTML.replace(/<div(\s)+(.)*class="myClass(1|2)"(.)*>(\s|\n|\t)*<span>-<\/span>(\s|\n|\t)*<\/div>/ig,'');
this may be the fastest solution because it's not using a loop or an external library.
or
var j = document.getElementsByClassName('myClass1');
var t = document.getElementsByClassName('myClass2');
var x = t.length--;
while(x--) {
t[x].innerHTML = t[x].innerHTML.replace(/(<span>-<\/span>)/g,'');
}
x = j.length--;
while(x--) {
j[x].innerHTML = j[x].innerHTML.replace(/(<span>-<\/span>)/g,'');
}
fiddle
I would use .filter().
$('div').filter(function(){
var $spans = $(this).find('> span');
return $spans.length === 1 && $spans.text() === '-';
}).remove();
Here's a quick demo: http://jsfiddle.net/VbpzZ/1/
I want to remove the ( from the HTML below
I have tried the following. I know I'm not using correct syntax
jQuery('div li').text().replace('/\(//', '');
jQuery('div li').text().replace('/(/', '');
jQuery('div li').text().replace('\(\', '');
jQuery('div li').text().replace('(', '');
HTML
<li>This text remains but i need to remove ( <a>from the sentence</a></li>
The .replace() method does not change the string object it is called on. It simply returns a new string.
So you can use the jQuery .html() method (assuming you want to keep the <a>) to get the string, pass the method a function to do the replacement, and return the modified HTML with:
jQuery('div li').html(function() {
return jQuery(this).html().replace('(', '');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>This text remains but i need to remove ( <a>from the sentence</a></li>
</ul>
</div>
The problem is that to replace the text, you need to put the text inside the parenthesis: text({here})
jQuery('li').text(jQuery('li').text().replace("(", ""))
or
var str = jQuery('li').text().replace("(", "");
jQuery('li').text(str)
See here for more info: https://api.jquery.com/text/#text2
To really be safe about things, you should save your jQuery, and then use each to iterate over each element.
Example:
var elems = jQuery('div li');
elems.each(function() {
var $this = $(this);
$this.text($this.text().replace('/\(//', ''));
});
Assigning ID or class to element will be better but here is your answer.
$('div li').text($('div li').text().replace("(",""));
My recommendation:
<li id="change">This text remains but i need to remove ( <a>from the sentence</a></li>
$('#change').text($('#change').text().replace("(",""));
Hi I think this should solve your problem:
$(document).ready(function(){
$('#btn').click(function(){
var elt = $("li"),
result= elt.html().replace(/\(/g, "");
elt.html(result);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>This text remains but i need to remove (
<a>from the sentence</a>
</li>
<button id="btn">Remove (</button>
You can try this:
var newContent = $('div li').text().replace('(', '');
$('div li').html(newContent);
Try this:
jQuery('div li').text().replace(/([,.(])+/g, '');