Develop Reference

Select and trigger click of hidden element based on it's css value

i have some div's [up to 1000] whose class name are same and different colours .
please see the following html
<div class="class-1" style="background-color:red; display:none;">1</div>
<div class="class-1" style="background-color:black; display:none;">2</div>
<div class="class-1" style="background-color:rgb(0,12,34); display:none;">3</div>
...
<div class="class-1" style="background-color:rgb(5,12,65); display:none;">1000</div>
Here how can i trigger the click of class1 whose background color is black ? I check with filter function but i didn't get the correct result
$(".class-1").filter(function(){
var match="black";
return ( $(".class-1").css('background-color') == match );
}).trigger("click");
Please help.

If you compare the below. It should work
var match = "rgb(0, 0, 0)";
Here is CodePen: http://codepen.io/rachitgulati26/pen/MJjaBp.

You might have forgotten to write a closing quote on your code on the second line.
Try changing it to var match="black"; and see if that helps.
The jQuery function .css() works that way and should work.
See https://api.jquery.com/css/ for more information, but based on the first example they give it is possible to retrieve your colour string that way.

I would suggest you use data tags.
HTML
<div data-color="black">black</div>
JQUERY
$('[data-color="black"]').html('black found');

jQuery for each div class find child and insertAfter

I am editing my blog theme and I need to move (cut and paste) multiple specific divs under itself within a specific blog post.
The current HTML would be
<div class="blog_post text_post">
<div class="post_container">
<div class="bottom_meta"></div>
<div class="post_date"></div>
<div class="moreinfo"></div>
<!-- I need .bottom_meta here -->
</div>
</div>
I managed to make it work like this:
$(".blog_post.text_post .bottom_meta").insertAfter(".blog_post.text_post .moreinfo");
And on first sight it looks okay,but when I wrote another text post (usually posts are images) it makes a mess on my blog.
The code now moves .bottom_meta from both posts under both .moreinfo .
I tried using each function but I failed multiple times...
$(".blog_post.text_post").each(function(){
$(this).children(".bottom_meta").insertAfter.$(this).children(".moreinfo");
});
I tried the same with 'find' function instead of 'children',still a fail.
Can anyone help me out with this or at least point me out to the right direction.

It should be:
$(".blog_post.text_post").each(function(){
$(this).find(".bottom_meta").insertAfter($(this).find(".moreinfo"));
});
Example Here
Change .insertAfter.$(this).children(...) to: .insertAfter($(this).children(...))
Also, since the .moreinfo/.bottom_meta elements aren't direct children, you need to use .find() rather than .children().
You can also simplify it to the following:
$(".blog_post.text_post").each(function () {
$(".bottom_meta", this).insertAfter($(".moreinfo", this));
});
Example Here

How to change the source of a child element with JavaScript?

I'm looking to change the source attribute of an image element when my parent element is clicked. The child/image element is actually nested within two div's which complicates things slightly and I have a suspicion this is where i'm going wrong in my code.
The JavaScript is as follows:
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function () {
$('.slideContent').hide();
$('.slideHeader').toggle(
function () {
$(this).next('.slideContent').slideDown();
$(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconUp.png";
},
function () {
$(this).next('.slideContent').fadeOut();
$(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconDown.png";
}
); // end toggle
}); // end ready
And the HTML is:
<div class="slideHeader">
<div class="dropDownIcon">
<img class="dropDownClass" src="./images/dropDownIconDown.png"/>
</div>
<div>
<p>2014</p>
</div>
</div>
<div class="slideContent">
<div>
<p>2014</p>
</div>
</div>
The slideDown and fadeOut functions from jQuery work fine. However the image change does not happen. So i'm confident my eror is within the following code:
$(this).children('.dropDownIcon').children('img').src = "./images/dropDownIconUp.png";
But as far as I can see, I select the correct elements in my chain. If anyone can shine any light on this it would be much appreciated. As everything else on the internet verifys the code above should work (Whilst a be little messy).
Thanks in advance.

src is an attribute of the img tag, so use .attr()
Try,
$(this).children('.dropDownIcon').children('img').attr('src', "./images/dropDownIconUp.png");

instead of using children selector twice use $(this).find('img').attr('src','./images/dropDownIconUp.png')

I know you have accepted the answer but let me tell you some points in brief
.src = "blah" would not work for jquery objects.$() always returns a jquery object and you must use .attr() or .prop() to work with jquery objects
However jquery provides a simple way to convert to javascript object
if you still want to use as a javascript object you could it this way
$(".slideHeader").children('.dropDownIcon').children('img')[0].src = "./images/dropDownIconDown.png";

jQuery jScrollPane replace specific div inside of getContentPane()

I'm using a custom jScrollPane and dynamically populate it using jQuery from a returned partial view.
I'm populating it like this:
var pane = $('.mainContainingDiv').jScrollPane(settings);
var api = pane.data('jsp');
// Populate function
api.getContentPane().html(someData);
api.reinitialise();
This is great and works exactly as I expect it to, but this content pain currently contains content that only needs to be set once so I do not want to return more than i have to on every server call. Rather, i'd like to move it out of the partial view and into the main view that contains the javascript.
Here's some html to illustrate this better:
BEFORE:
<div class="myContainingDiv">
<div class="staticContentDivThatIDontWantReturnedOnEveryServerCall">
Info
</div>
<div class="dynamicDiv">
More Info
</div>
</div>
so right now I'm replacing both divs with the getContentPane() function. How can I only replace one. e.g.
CALL 1
// some controller calls
api.getContentPane().html(NEWDATAFROMWHEREVER);
Here's what this results in (as expected), and the result I want.
UNDESIRED RESULT
<div class="myContainingDiv">
NEWDATAFROMWHEREVER
</div>
DESIRED RESULT
<div class="myContainingDiv">
<div class="staticContentDivThatIDontWantReturnedOnEveryServerCall">
Info
</div>
NEWDATAFROMWHEREVER
</div>
So how can I replace only one div in the container with the getContentPane() call via jScrollPane
Thanks

Figured it out:
api.getContentPane().children('.dynamicDiv').html(NEWDATAFROMWHEREVER);
api.reinitialise();
hopefully this helps someone else

How can accomplish a dual div swap on rollover?

I am looking for advice on a way to accomplish this. Given the following:
[Div A (contains an image)]
[Div B (contains a horizontal list of 8 or so text links)]
[Div C (contains text)]
Upon rolling over any link in Div B, how can I have Div A and Div C swap their respective contents out to something different that corresponds to the content of that link?
For example, if one were to rollover a Div B link called "Dogs", then upon that rollover, Div A would replace its contents and display an image of a dog and Div C would replace its contents and display text about dogs.
After rolling over that link, the new Div A and Div C contents will remain in place until a new link is rolled over.
I hope this makes sense. Does anyone have advice on the best way to accomplish this?

Assuming the href points to one resource that contains the content for both, but you can't just inject the entire output of the link into one element, something like this could work:
$('#divB a').mouseover(function() {
//get images from link, inject into divA
$('#divA').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' img');
//get divs from link, inject into divC
$('#divC').html('<strong>Loading...</strong>')
.load($(this).attr('href') + ' div');
});

Hmm... this should be pretty simple with jQuery (compared to some of the other answers here):
If you're unfamiliar with jQuery, the $() is a shortcut for calling jQuery(), and using
$(document).ready(function() {
// put all your jQuery goodness in here.
});
is a way to make sure jQuery fires at the right time. Read more about that here.
So first, add a class (ie .dogs) to each <a> element in your #divB list. Next, give each of the corresponding images the same class, and contain each of your text blocks in #divC in divs with the same class as well. The HTML would look something like this:
<div id="divA">
<img src="dogs.jpg" class="dogs" />
<img src="flowers.jpg" class="flowers" />
<img src="cars.jpg" class="cars" />
</div>
<div id="divB">
<ul>
<li>Dogs</li>
<li>Flowers</li>
<li>Cars</li>
</ul
</div>
<div id="divC">
<div class="dogs"><p>Text about dogs.</p></div>
<div class="flowers"><p>Text about flowers.</p></div>
<div class="cars"><p>Text about cars.</p></div>
</div>
Then use the following jQuery, putting this up in the <head> section of your HTML doc:
$(document).ready(function() {
$('a.dogs').hover(function() {
$('#divA img').hide("fast");
$('#divA img.dogs').show("fast");
$('#divC div').hide("fast");
$('div.dogs').show("fast");
});
});
We say when the document is ready, when you hover over the <a> element with the .dogs class, perform a function. That function will hide all of the images in #divA and immediately show the image with the .dogs class. Then it will hide all of the divs in the #divC and immediately show the div with the .dogs class.
You can do the same thing twice more for .flowers and .cars, or however many you have.
Keep in mind, there are more efficient ways of doing this too, if you're interested in looking deeper into jQuery, but this will be a solid way to get started in helping you understand exactly what jQuery is doing. And it keeps the script OUT of the HTML body, too!

You can change a div's contents with something like this:
<script type="text/javascript">
function over() {
var a = document.getElementById('a');
var c = document.getElementById('c');
a.style.backgroundImage = "url(/path/to/image)";
c.innerHTML = "<b>Dogs rock</b>";
}
</script>
<div id="a"></div>
<div id="b" onmouseover="over();"></div>
<div id="c"></div>
Then all you need to do is add whatever other div's you want and write code to change them appropriately. Set the initial state of A and C using css, or just call the over() function on page load.