I'm trying to achieve the following:
I have multiple divs with the class "et_pb_row_inner" that contain two columns each. Each of the columns contain a text container with the class "et_pb_text".
Here's the basic html:
<div class="et_pb_row_inner">
<div class="et_pb_column"><div class="et_pb_text"></div></div>
<div class="et_pb_column"><div class="et_pb_text"></div></div>
</div>
<div class="et_pb_row_inner">
<div class="et_pb_column"><div class="et_pb_text"></div></div>
<div class="et_pb_column"><div class="et_pb_text"></div></div>
</div>
<div class="et_pb_row_inner">
<div class="et_pb_column"><div class="et_pb_text"></div></div>
<div class="et_pb_column"><div class="et_pb_text"></div></div>
</div>
I need a way to check if the text in the second column of each row is empty and if so remove the whole row. Like so:
<div class="et_pb_row_inner">
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
</div>
<div class="et_pb_row_inner"> <!-- second column text empty, remove whole row -->
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
<div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>
<div class=".et_pb_row_inner"> <!-- second column text empty, remove whole row -->
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
<div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>
I found a code snippet and tried the following:
$(function() {
$('.et_pb_row_inner').each(function() {
if ($('.et_pb_text', this).text() == "" ) {
$('.et_pb_row_inner').hide();
}
});
});
It kind of works, but it removes ALL divs with the class "et_pb_row_inner", not just the ones that contain the empty text div.
I guess it's just tweaking the code a little, but I can't get it working.
Any ideas?
First of all, in your HTML third row, you mistakenly added "." in class name
Now below snippet will get the job done
$(function() {
$('.et_pb_row_inner').each(function(_, item) {
let text = $(item).children().eq(1).text();
if(text.trim() === "EMPTY"){
$(item).remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_row_inner">
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT1</div></div>
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT</div></div>
</div>
<div class="et_pb_row_inner"> <!-- second column text empty, remove whole row -->
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT2</div></div>
<div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>
<div class="et_pb_row_inner"> <!-- second column text empty, remove whole row -->
<div class="et_pb_column"><div class="et_pb_text">HAS TEXT3</div></div>
<div class="et_pb_column"><div class="et_pb_text">EMPTY</div></div>
</div>
Edited:
Replaced the $(item).empty() with $(item).remove()
Try accessing the _inner div using the Child Nodes of the div with no text. You can run the _inner class selector on these with the .find function on the parent div.
try this:
$('.et_pb_row_inner').each(function() => {
if ($('.et_pb_text', this).text() == "") {
$(this).hide();
}
});
this should point to the .et_pb_row_inner currently in iteration
You could use the :contains selector to achieve what you require in a single line of code. The caveat here is that it's a greedy match, ie. in this case it would also match 'NOT EMPTY'. I'll leave that as a matter for the OP to determine if this fits their use case.
$('.et_pb_row_inner:contains("EMPTY")').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="et_pb_row_inner">
<div class="et_pb_column">
<div class="et_pb_text">HAS TEXT</div>
</div>
<div class="et_pb_column">
<div class="et_pb_text">HAS TEXT</div>
</div>
</div>
<div class="et_pb_row_inner">
<div class="et_pb_column">
<div class="et_pb_text">HAS TEXT</div>
</div>
<div class="et_pb_column">
<div class="et_pb_text">EMPTY</div>
</div>
</div>
<div class="et_pb_row_inner">
<div class="et_pb_column">
<div class="et_pb_text">HAS TEXT</div>
</div>
<div class="et_pb_column">
<div class="et_pb_text">EMPTY</div>
</div>
</div>
Try this:
$('.et_pb_row_inner').each((idx, ele) => {
if($($(ele).children()[1]).text() === ''){
$(ele).hide();
}
})
Related
I've this loop in WordPress that displays post.
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1"></div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
This 'parent-div' is in loop and it repeats 20-30 times for each post. For some of the posts, sub-child div would have no content, and in that case I want to hide 'child-1' div just for that particular post.
Solution in jQuery, JavaScript or PHP is fine.
Hope that makes sense.
Thanks.
You can try following
$(".parent-div").each((i,e) => {
if(!$(e).find(".child-2 .sub-child").text().trim()) $(e).find(".child-1").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 1</div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 2</div>
<div class="child-2">
<div class="sub-child">
Some text
</div>
</div>
</div>
Try this with jQuery, where you can iterate over each parent div and check for text. if text length is zero then hide child div
$(function(){
$(".parent-div").each(function(){
var text = $(this).find(".child-2 > .sub-child").text();
if(text.length==0) {
$(this).find(".child-1").hide();
}
});
});
For the life of me I can't figure out how to access the first div with text "I want this one" starting with the id of div1
My attempt:
$("#div1").first().first().html();
Here is an example
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
</div>
Try this
1.
$("#div1 .another:first").html();
2.
$("#div1 .another").first().html();
3.
$("#div1 .another").eq(0).html();
Example
If you literally want the first element within the first element, you can do it in one selector using pure javascript selectors for performance like so:
var row = $('#div1 > div:first-child > div:first-child');
alert(row.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
<div class="row">
<div class="another">Another one</div>
<div class="another">Yet another one</div>
</div>
</div>
If you have the following code:
<div class="parent">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
How can I wrap a new div around div with class 2,3,4,5 so it looks like this:
<div class="parent">
<div class="1"></div>
<div class="sub">
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>
</div>
wrapAll on the parent would wrap everything with a new div, is there a way to make it ignore the first div?
Use gt(0) to select all but the first one div(direct descendant) and wrapAll. This will select all divs with index greater than 0 present under .parent div.
$('.parent > div:gt(0)').wrapAll('<div class="sub">');
Fiddle
See :gt()
Output:
<div class="parent">
<div class="1">1</div>
<div class="sub">
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="5">5</div>
</div>
</div>
Use the not() filter or the :not() selector.
$('.parent div').not('.1').wrapAll('<div class="sub">');
Or alternatively:
$('.parent div:not(.1)').wrapAll('<div class="sub">');
You can also use div:first-child in place of .1 if you always want to ignore the first element.
If the element you want to keep out is not necessarily the first, you could use:
$(".parent div").not("div.1").wrapAll("<div class='sub'>");
Although, this will re-order your divs so that the wrap comes first, and the unwrapped element comes last. Not a problem when it's the first element, but if it's the third, for example, the output would be:
<div class='sub'>
<div class="1"></div>
<div class="2"></div>
<div class="4"></div>
<div class="5"></div>
</div>
<div class="3"></div>
Example:
http://jsfiddle.net/tomtheman5/3TL4M/
edit: Just saw #Corion's answer... This is essentially the same, but with some more information. I'll leave it up.
I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>
You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)
I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});
I replaced the broken img links with simple text for the jsfiddle.
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.