I am trying to loop through Html and find if an element has a specific child:
$('#thisFormat article div p').each(function() {
if ( $(this).parent().find('.specialclass').length) {
var LowerTrue="Yes";
IsLower.push(LowerTrue);}
else{
var LowerTrue="No";
IsLower.push(LowerTrue);
};
});
But I only get No answers though some elements has that specialclass. Also there is a ::before tag in the element that I want to check if it exists:
<i title="Exists" class="specialclass">
::before
</i>
So is it possible to solve my problem? Any suggestions are much appreciated.
HTML:
<div id="thisFormat">
<article>
<div>
<p class="specialclass">
<i title="Hello" class="specialclass">
::before
</i>
</p>
</div>
</article>
<article>
<div>
<p class="specialclass">
</p>
</div>
</article>
</div>
This works:
$('#thisFormat article div p').each(function() {
if ( $(this).children("i").length) {
var LowerTrue="Yes";
IsLower.push(LowerTrue);}
else{
var LowerTrue="No";
IsLower.push(LowerTrue);
};
});
To check for the ::before tag inside your .each() you can do
$(/* get the <i> you want */).html == '::before';
The problem with your array is that by asking the parent() you are targetting the div, while you say the <i>'s are in <p>'s
Try the following
var IsLower = []
$('#thisFormat article div p').each(function() {
if ($(this).find('.specialclass').length == 1) {
var LowerTrue = "Yes";
IsLower.push(LowerTrue);
} else {
var LowerTrue = "No";
IsLower.push(LowerTrue);
};
});
$('#out').html(IsLower);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thisFormat">
<article>
<div>
<p>
<i title="Exists">
</i>
</p>
<p>
<i title="Exists" class="specialclass">
</i>
</p>
</div>
</article>
</div>
<div id="out"></div>
Related
Question correction:
I am trying to hide the entire 'li' block if the ptag inside of the 'li' is empty.
The p tag resides inside of the 'li' in a div with the class of
aaProfileDataWrapper
So if that p tag has no text inside of it then the entire 'li' need to hide including the labels and anything else it holds.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var div = $(this);
if (div.next().html() === "<p></p>") {
div.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
All you need to do is query for al the p elements within any div element that has the aaProfileDataWrapper class that, themselves, are children of a li element. Then, you can loop over those p elements and, if they are empty, hide the li ancestor.
// Loop over all the p elements within the div elements that
// have the right class, that are inside of li elements
$("li div.aaProfileDataWrapper p").each(function (idx, el) {
// Check the p to see if it's empty
if ($(el).html() === "") {
$(el).closest("li").hide(); // Hide the nearest li ancestor
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="aaProfilePhone">
<label>Office 1 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p>something</p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
</ul>
Plain old JavaScript to the rescue. Pleas let me know if there is any doubt.
const divs = document.getElementsByClassName('some-class');
Array.from(divs).forEach((div) => {
const p = div.querySelector('p');
if (p && !p.innerText) {
div.style.display = 'none';
} else {
div.style.display = null;
}
});
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
You can use find() to search for a <p> and then use text().length to see if it's empty.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var p = $(this).find("p")
if (!p.text().length > 0) {
p.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p></p>
</div>
I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.
var checkbox = document.querySelector("input[name=toggle]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("on-toggle").style.display = "block";
document.getElementById("on-toggle").style.height = "auto";
} else {
document.getElementById("on-toggle").style.display = "none";
document.getElementById("on-toggle").style.height = "0";
}
<div id="switch">
<h2 id="CTA-switch">Turn creativity on </h2>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle">
<i class="bulb">
<span class="bulb-center"></span>
<span class="filament-1"></span>
<span class="filament-2"></span>
<span class="reflections">
<span></span>
</span>
<span class="sparks">
<i class="spark1"></i>
<i class="spark2"></i>
<i class="spark3"></i>
<i class="spark4"></i>
</span>
</i>
</label>
</div>
</div>
<div id="on-toggle">
<div id="references">
<h1>REFERENCE SITES</h1>
</div>
</div>
</div>
You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.
I want to remove all the span tags having class article and attach a new span tags to the content
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
In the javascript i've a text,
var text = "bar lorem ipsum";
I want javascript to find this in the DOM and if it is there, then remove the span tags from the elements and put all of them in a single span tag, like this
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar lorem ipsum</span>
</div>
Any help would be greatly appreciated.
You can use jQuery each() function for this, check updated snippet below:
var newHTML ='';
$('.asd span.article').each(function(){
newHTML += $(this).text() + " ";
$(this).remove();
})
$('.asd').append("<span class='article'>"+newHTML+"</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
Here you check with jquery:
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
Js
$(".article").remove();
$(".asd").append('<span class="article">bar lorem ipsum</span>');
Hope this helps you.
Try this .use with each function jquery .check the class name includes in array .Is not Then pass the the class name to array .
And also added the respected text with eq(0)(first element of same classname)
var arr=[];
$('.asd').children('span').each(function(a){
var cls =$(this).attr('class');
if(!arr.includes(cls)){
arr.push(cls);
}
else{
$('.'+cls).eq(0).text($('.'+cls).eq(0).text()+' '+$(this).text())
$(this).remove()
}
})
console.log($('.asd').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
I have this html structure, this is a snippet there is lots more in the same structure.
<button id="showEmpty">Press</button>
<div class="children">
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<div class="children">
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<div class="children">
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package array">
<span class="name"></span>
<span class="value"></span>
</div>
<div class="package">
<span class="name"></span>
<span class="value"></span>
</div>
</div>
</div>
</div>
</div>
</div>
I want to find all of the div elements with the class 'array' and then the span elements with the class 'value' within those div that dont have any content.
Those that apply I want to change the class of another span element within the div with the class 'name' to say 'empty'.
I have this code so far, but I'm not sure where to go next.
(function(){
$('#showEmpty').click(function() {
if ($('div.package').each().hasClass('array') && $('span.value').each().text().trim().length()) {
$('span.value').removeClass('name').addClass('empty');
else alert('no arrays found');
}
});
});
EDIT: I would also need to only do this where the array div's don't have children div's
One easy way is(assuming the empty span will be <span></span>, ie there is no blank content in it)
jQuery(function ($) {
$('#showEmpty').click(function () {
$('div.package.array').has('span.value:empty').find('span.name').removeClass('name').addClass('empty');
});
});
Here we finds div with classes package and array which has an empty span with class value, then find the span with class name in those div and remove and add class
If the span.value can have blank values then you can use a filter
jQuery(function ($) {
$('#showEmpty').click(function () {
$('div.package.array').filter(function () {
return $('span.value', this).text().trim().length() > 0;
}).find('span.name').removeClass('name').addClass('empty');
});
});
You can use this function:
$('.array').each(function(){
if ($(this).children('span.value').text() === "")
{
$(this).children('span.name').addClass('empty').removeClass('name');
}
});
Fiddle here
$('div.package.array > span.value').each(function () {
$('span.name').removeClass('name').addClass('empty');
});
This is how I would do it:
$('#showEmpty').click(function () {
$(".array > span.value:empty").siblings(".name").removeClass('name').addClass('empty');
});
Here is the JSFiddle demo
You can inspect-element to see the changes on button click.
You can use a code like this:
$(document).ready(function(){
$('#showEmpty').click(function() {
$('div.package span.value').each(function(){
if ($(this).val().length==0) {
$(this).parent().find('span.name').removeClass('name').addClass('empty');
}
});
});
});
Fiddle here: http://jsfiddle.net/n2o55xve/
Hope it helps.
I have issues when trying to place an event to toggle a div using an element outside of the parent container.
I trying to target the same behavior from outside of the parent elements using a span tag.
Any help would be grateful.
HTML:
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
Javascript:
$('.toggler').live('click',function(){
/* $(this).parent().children().toggle(); //swaps the display:none between the two spans */
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action
});
Amended your example to suit the purpose.
<div id="container">
<div>
<div>
<span class='open'>Open</span>
<span class='close' style='display:none;'>Close</span>
</div>
<div class='content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='close'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggle">Gain Early Access</span>
</div>
$(".toggle").click( function( ) {
$(".content").slideToggle();
});
$(".open").click( function( ) {
$(".content").slideDown();
});
$(".close").click( function( ) {
$(".content").slideUp();
});
Just use a global parent div.
<div id="container">
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
</div>
And you can just do this :
var container = $('#container');
container.on('click', '.toggler', function() {
container.find('.toggleHolder .toggler').toggle();
container.find('.toggle_content').slideToggle();
});
By the way, if you use jQuery 1.7 or more, live is deprecated. See http://api.jquery.com/live/