Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.
Related
I am having an issue when using <#nested in FreeMarker
If I do:
<div style="background: white;">
<#nested "header">
<#nested "info">
<#nested "form">
</div>
<div>NOT WHITE</div>
Even the div with NOT WHITE text has a white background. The div itself also gets nested inside the previous div for some reason. Can someone help me here?
Probably your actual nested content (which you don't show in your question) has an unclosed div. Thus the </div> you have after <#nested "from"> closes that unclosed div, and so the div that sets the white background stays open.
I'm using tne sling component /libs/wcm/foundation/components/image.
I need to use the rendering image as css background.
<img src="${image.src} /> -> OK: works
<div style="background-image: url('${image.src}')">my text</div> -> KO: does not work.
The result is <div style="background-image: url('')">my text</div>
I tried it on Chrome, FF and IE.
Can anyone help me solve this problem ?
Thanks
Sightly automatically escapes the values to prevent Cross Site Scripting issues, when do display context is specified. For CSS Strings, use the display context styleString so that it encodes characters that would break out of the string.
<div style="background-image: url('${image.src # context='styleString'}')">my text</div>
For more information on display context, refer to Sightly docs
Please try this:
style="background-image:url('${image.src # context='unsafe'}')"
I try to map the following html (it´s a small fce)..
<div>
<div data-hero="1">
<h1>
<!-- Headline -->
</h1>
<p>
<!-- Small Text -->
</p>
<p>
<a>
<span><!-- Button Text --></span>
</a>
</p>
</div>
</div>
Mapping is ok... But when i map the <span> i get a No content found div[1] div[1] p[2] a[1] span[1] error. The <a>-Tag is mapped outter so it should work..
What I try to achieve: Set a Text that is displayed in the <a>-tag, instead of the link target itself.
It´s a TYPO3 4.7 using the latest TemplaVoilà.
Why is that? Thanks in advance!
Edit
#biesior suggested this is not possible - so no i wrap a <span> into the <a>-tag via Typoscript.
Is there a chance to display a certain fields content in this <span> - speak: replacing the linktext, so that i can have a Click here for more ... instead of pageXY?
Btw: I use a linkfield and not the Rich-Text-Editor for setting the link.
You can not map any element nested in previously mapped element.
The fastest solution is mapping the A tag, and wrapping inserted text with <span>|</span> with TypoScript.
I don't know if the title is all apt...... but here is my situation....i have a class called dropper and another class drop_list...these two are sub-classes of the class drop_head, the drop_list has to drop down whenever the dropper is clicked...
<div class="drop_head">
<div class="dropper"> Content-1</divr>
<div class="drop_list"> List-1</div>
</div>
<div class="drop_head">
<div class="dropper"> Content-2</divr>
<div class="drop_list"> List-2</div>
</div>
when content-1 is clicked list-1 has to toggle and when content-2 is clicked list-2 has to drop down... how do i achieve this using single jquery..?? thanks in advance......
If i understand you correctly this should be pretty simple:
$('.drop_head').each(function(i,e){
$('.dropper', e).click(function(){
$('.drop_list', e).slideToggle();
});
});
by using the .drop_head as the context for the list and clickable element you dont need to use id's. additionally if you omit a list or dropper by accident it will only screw up that one "widget" and wont effect the others, which wouldnt be the case with closest.
you have two way (that I see =))
-just give two different ID names to your couples drop-list/dopper
<div class="dropper" id="id_1"> Content-1</divr>
<div class="drop_list" id="id_1"> List-1</div>
<div class="dropper" id="id_2"> Content-2</divr>
<div class="drop_list" id="id_2"> List-2</div>
and then say something like:
$(".dropper #id_1").click(function(){$("#id_1").slideToggle("slow")})
or shorter:
$(".dropper").click(function(){$(this).closest('drop_list').slideToggle()})
Hope it helps
Luca
I have this html:
<div id="top">
<div id="potato"></div>
</div>
<div id="bottom">
<div id="potato"></div>
</div>
I am trying to use JQuery to access the bottom potato div, and none of the following work.
$('#top #potato').html('Russet');
$('#bottom #potato').html('Red');
$('#top > #potato').html('Russet');
$('#bottom > #potato').html('Red');
$('#potato').html('Idaho');
All of these just modify the top div and not the bottom one. How do I modify the bottom div?
All elements must have unique IDs, in this case you may use the class attribute, so that you have
<div class="potato" />
Which you may access like this:
$('#bottom > .potato').html('Idaho');
I just ran into this problem. Although it's true you shouldn't have two items with the same ID, it happens.
To get the div you want, this is what works for me:
$('#bottom').find('#potato');
For one thing you can not have an element that has the same id as another. Id is unique, but class names can be used as many times as you want
<div id="top">
<div id="potato1"></div>
</div>
<div id="bottom">
<div id="potato2"></div>
</div>
jquery as so:
$(function{
$("#potato2").html('Idaho'); //if you're going to name it with an id,
// that's all the selector you need
});
What you posted and said doesn't work seems to work to me.
$('#top #potato').addClass('Russet');
$('#bottom #potato').addClass('Red');
https://jsfiddle.net/wzezr706/
no need to put classes on everything, but you should have unique id's for everything. That aside, try this:
$("#bottom + div").html('Idaho');
Try this:
$("#bottom #potato").html('Idaho');
Or
$("#bottom #potato:last").html('Idaho');
your HTML is not valid, since you have non-unique ids