I am requesting data (with jQuery load() function) from another site into my <div class="ajax-container"> to display the gathered data. Data comes with elements AND content (only text, like "born 2007"). I have tried to wrap these with jQuery wrap() and wrapAll method, but it doesn't wrap it correctly. So I want to wrap all elements and content into a single div so I can style it more easily.
How can I achieve this? I need to wrap everything UNTIL certain class is found. I've also tried jQuery parentsUntil() method but that didn't work either. I have no idea how to achieve this so I need your help.
Example data (html that prints to my page):
<div class="container">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
<div class="picture">
...
</div>
</div>
So that's the problem, I have to wrap everything into a div until <div class="picture"> appears.
This did not work:
$(".container").children().nextUntil(".picture").wrapAll("<div></div>");
This would be the desired result:
<div class="container">
<div class="content">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
</div>
<div class="picture">
...
</div>
I believe the best approach is to wrap the inner contents then move "picture":
$(document).ready(function(){
$(".container").wrapInner("<div></div>");
$(".container").append($(".container .picture"));
})
.container > div ~ .picture {color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
<div class="picture">
...
</div>
</div>
Related
Javascript expert this is my template coding:
<html>
<head>
</head>
<body>
<div id='top'>
<h2> This is my website headline </h2>
</div>
<div class='outer-wrapper'>
<h3>This is content area for main blog </h3>
</div>
<div class='footer'>
<h4> This is footer content area </h4>
</div>
<!--Copyright Structure Start-->
<div id='copyright'>
<div id='container'>
<p>Copyright 2016. Designed By <a href='#'>Company</a>
</p>
</div>
</div>
<!--Copyright Structure End-->
</body>
</html>
i have the below html structure that is used in the template.
<div id='copyright'>
<div id='container'>
<p> Designed By <a id='doom' href='http://www.example.com'>Company</a>
</p>
</div>
</div>
Case 1: Now,i want if the same sequence exist #copyright > #container > p > a#doom in the the html structure inside the template Then its ok, if any if these has removed, then redirect my page to example.com.
<div id='copyright'>
<div id='container'>
</div>
</div>
See the structure above has no <p></P> tag, now it should be redirected.
Case 2: If there is added extra other html tag inside my html structure in the template rather than these tags: #copyright #container P and a#doom. then it should also redirected.
<div id='copyright'>
<div id='container'>
<div id='wrap'>
<p> Designed By <a id='doom' href='http://www.example.com'>Company</a>
</p>
</div>
</div>
</div>
See the structure has extra div wrap now, it should redirected to example.com because it does not match the sequence.
I hope someone will give the script soon. thanks.
You can just use the selector in JQuery and check the length. If you change the HTML, the selector won't match, and you don't redirect:
Run this when you HTML has loaded (onLoad or domReady):
if( $('#copyright > #container > p > a#doom').length == 0 ) {
alert("Redirect");
}
Example fiddle:
https://jsfiddle.net/feb5zex2/
You basically want to run this code when the document is ready (1. line) and if a specific CSS selector with direct ancestor combinations doesn't match (2. line), redirect using window.location.replace() (3. line).
$(document).ready(function() {
if ($("#copyright > #container > p > a#doom").length == 0) {
window.location.replace("http://www.example.com");
}
})
Imagine you had html code like this:
<div id="2761421" class="..." data-attributionline="testtext wrote at..." data-created-at="1342689802000" data-updated-at="1342689802000" data-user-id="36847" >
<div class="subject"> <strong>
<a name="2761421" href="#2761421">wee</a></strong>
</div>
<div class="info">
<div class="author"> author:
<span class="name"> testtext (
we)
</span>
</div>
<div class="date"> date:
<time datetime="dfgdf">dfgdfg
</time>
</div>
</div>
<hr style="clear: both;" />
<div class="text gainlayout"> some text
</div>
<div class="foot gainlayout unselectable">
<span class="menuitem postmenuitem-report">
cvbcvb
</span>
</div>
</div>
What would the javascript code look like that searches the whole document for parts where the div with data-attributionline= contains testtext to replace the whole cited div from start to finish with "Filtered"?
or
What would the javascript code look like that searches the whole document for
<span class="name">
where the name contains testtext to replace the whole div starting from
<div id="<someid>" class="..." data-attributionline="testtext<some text>" data-created-at="<somedate>" data-updated-at="<somedate>" data-user-id="<someid>" >
to the last div, ie
</span>
</div>
</div>
with "Filtered"?
There is a whole bunch of attribute selectors (see also CSS), that will match elements with attributes that start with or contain testtext.
In javascript, you can use document.querySelector[All]() or a library function that supports those to get the elements, then remove them.
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..
Let's say I have the following.
<div class="foo">
<div>
some text
<div class="bar">
</div>
</div>
</div>
<div class="foo">
<div>
some text
<div class="bar">
some text
</div>
</div>
</div>
I want return all the divs of class "foo" that have "some text" inside the div class "bar." So the second would be returned, but not the second. How can I do that?
Try this
$("div.bar:contains('some text')").parents(".foo")
This will do it
$('.foo:has(.bar:not(:empty))')
Make sure there are no characters inside the .bar, even spaces or newlines.
http://jsfiddle.net/Nk4FB/
I have a list of images and I really need to get ID of each image inside my JS, but I don't know how to do that. I've tried this method, but it is returning empty string instead of ID. I tried getting it from DOM elements http://galleria.aino.se/docs/1.2/references/dom/ like $(".galleria-thumbnails img").click(function(){alert((this).id)}); but this method is not working, alert is simply not showing up. Also I did some research here http://galleria.aino.se/docs/1.2/api/methods/ and got this code, but this is showing alert of empty string.
$("#gallery").galleria({
});
myGalleria = Galleria.get(0);
myGalleria.$('thumbnails').click(function(){
alert((this).id);
});
gallery div
<div id="gallery">
<img id="someid" src="http://photoapproaches.files.wordpress.com/2010/03/helen-model-2272.jpg" />
<img id="otherid" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
</div>
Console is empty of errors, nothing is showing in console. Also this markup is working fine the gallery plugin is making DOM elements on their own, and that is very frustrating with this situation. DOM structure can be viewed here, but I will link it in here as well http://galleria.aino.se/docs/1.2/references/dom/
<div class="galleria-container">
<div class="galleria-stage">
<div class="galleria-images">
<div class="galleria-image">
<img>
</div>
<div class="galleria-image">
<img>
</div>
</div>
<div class="galleria-loader"></div>
<div class="galleria-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-right-nav"></div>
<div class="galleria-image-left-nav"></div>
</div>
</div>
<div class="galleria-thumbnails-container [ carousel ]">
<div class="galleria-thumb-nav-left [ disabled ]"></div>
<div class="galleria-thumbnails-list">
<div class="galleria-thumbnails">
<div class="galleria-image">
<img>
</div>
[...]
</div>
</div>
<div class="galleria-thumb-nav-right [ disabled ]"></div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title"></div>
<div class="galleria-info-description"></div>
<div class="galleria-info-author"></div>
</div>
</div>
<div class="galleria-tooltip"></div>
</div>
Here is a one way to access id of an element:
var currentId = $(this).attr('id');
For your case, you can try this:
myGalleria.$('thumbnails').click(function(){
alert($(this).attr('id'));
});
should it not be alert($(this).id);? (Note the $).