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>
Related
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();
}
})
I have a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there
The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>
.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).
Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
$('.box_service').wrap('');
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();
}
});
});
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.