I am trying to hide a div that displays comment info if the comment is a child.
In the code below I am trying to make it so if "ol" has class of "children" then the div inside with the id "info" will be hidden.
Also open to other ways of hiding the div if the the comment is a child.
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div style='display:none'>
<p>asdsadasdsadasasdasdas
<div id="info" class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
Considering the code you posted, this is the CSS code that you need:
ol.children #info {
display: none;
}
However, assuming you have more than one of these comments, I have to add the following note:
Passing the same id to more than one element in your page is not a good idea. Ids should be unique identifiers of HTML elements. You should use a class for your purpose.
Now, assuming your to-be-hidden elements will always be wrapped in elements with itemprop="reviewBody", this is what you should use to hide them on ordered lists of comment that have the class children:
ol.children [itemprop="reviewBody"] {
display: none;
}
Here's the "cleaned up" version of your code:
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
Please note that the above code will hide the review body section of all the comments in your list if the list has the class children, including the top level ones. If an ordered list has even one children, it will probably have the class children added to it by WordPress.
If you only want to hide the review body section on level 2 comments (or higher) but keep them visible on level 1 comments, and assuming these level 1 comments have the added class of level-1 (I'm guessing, since you didn't show us a level 1 comment) , this is the CSS you should use:
ol.children>li:not(.level-1) [itemprop="reviewBody"] {
display: none;
}
Try $('ol.children #info').hide();
Expounding from Kyle Emmanuel's answer, try to use this jQuery selector
$('ol.children div[id="info"]').hide();
Use the div[id="info"] selector if you're looking for divs with info as id. The #info selector will only return the first DOM element with info as ID, which should be fine anyway since you should only alot unique IDs to your elements.
Related
I have the below html structure and I'm trying to get the text of h tags and add as a data- attribute in the corresponding tags:
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
So 'foo' should be set as a data attribute value for anchor 1,2,3 elements and
'bar' should be set as a data attribute value for anchor 4. Something like this:
<a data-custom="foo" href="#">anchor1</a>
<a data-custom="foo" href="#"">anchor2</a>
<a data-custom="foo" href="#">anchor3</a>
<a data-custom="bar" href="#">anchor4</a>
I tried to iterate over the elements and I'm struck at the second loop.
$(".content .body").each(function() {
$(this).find(".link").attr("data-hN", $(this).next(":header").text());
});
You have an extra double quote two times in your HTML. But, fixing that and foregoing JQuery (which is overkill for such a trivial task), see comments inline below:
// Loop over the links
document.querySelectorAll("div.link > a").forEach(function(item){
// Set the current link data-custom attribute to the nearest
// .body ancestor and the first heading element within that text
item.dataset.custom = item.closest(".body").querySelector(":first-child").textContent;
console.log(item);
});
<div class="content">
<div class="body">
<h1>foo</h1>
<p>para-test1</p>
<p>para-test2</p>
<div class="link">
anchor1
anchor2
anchor3
</div>
</div>
</div>
<div class="content">
<div class="body">
<h1>bar</h1>
<p>para-test3</p>
<div class="link">
anchor4
</div>
</div>
</div>
if (jQuery("li.store .premise")[0]) {
jQuery(".address .arrow").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow"></span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span
class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>
Is there a way to check if an element contains specific class and if it does, then to edit only this or these elements.
I have a list of stores and I want if some of them contain specific class to remove the arrows.
I tried with this but it removes all elements with a class arrow and I want to remove the only storeеthat have the specific class which in this case is class="premise"
Closest using get parent element then find class for .arrow then remove method using removed.
$(".store .premise").closest(".address").find('.arrow').remove();
Once you have a collection of premises, use .closest to navigate to their ancestor address, from which you can get to the .arrows:
$('div.store .premise').closest('.address').find('.arrow').remove();
(assuming that the .store element in your actual code is a <li>, otherwise use div.store or just .store)
$('div.store .premise').closest('.address').find('.arrow').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow">arrow here</span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>
I need to rearrange the div order of an RSS. Each item has 3 divs. I will need to move the div with the class "itemDate" before the div with the class "itemTitle" (see markup below). Should I use the function .each(); is there a jQuery out of the box solution for this or do I need to write my own function?
<div id="RSS">
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
</div>
There is a function in jQuery called prependTo, which moves a element to the beginning of a given target. Check it out the example below.
$('.itemDate').each(function(){
$(this).prependTo($(this).parent());
});
This code just move every itemDate into the beginning of every respective parent.
I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?
You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>
In my actual code:
<div id="mother">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="child-03"></div>
</ul>
I need to produce:
<div id="mother">
<div id="myWrap">
<div id="child-01"></div>
<div id="child-02"></div>
</div>
<div id="child-03"></div>
</ul>
I was playing with wrap, .wrapAll() and children, but I'm stuck.
If in my actual code i have:
<div id="mother">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="child-03"></div>
</ul>
<div id="uncle">
<div id="cousin-01"></div>
<div id="cousin-02"></div>
<div id="cousin-03"></div>
</ul>
How do i produce:
<div id="mother">
<div id="myWrap">
<div id="child-01"></div>
<div id="child-02"></div>
<div id="cousin-02"></div>
</div>
<div id="child-03"></div>
</ul>
First as Adam said remove the # prefix from your id attributes. Also match your closing tags, currently you have a </ul> where a </div> should be.
Then, you can do it using :lt() and .wrapAll() like this:
$("#mother div:lt(2)").wrapAll("<div id='myWrap'></div>");
This gets everything less than index 2 (0 and 1 are the first 2), then wraps it. You can test it here.
Remove # from your HTML ids.
$("#mother div:eq(0), #mother div:eq(1)").wrapAll("<div id='father'></div>")
sharp should not be part of the id's. Then you can do:
$('#child-01, #child-02').wrapAll('<div id="#mywrap" />');
$(document).ready(function(){
$(".new-grid__item:nth-child(1), .new-grid__item:nth-child(2)").wrapAll('<div class="child"></div>');
});