I am trying to get hold of the last child of class full-width. It's a looping text with border-bottom. All I want is that the last child doesn't get the border. To make sure it works in IE8 too, I am doing it through JQuery:-
Somehow it doesn't work.
JQuery
$(".solutions-section .field-items .field-item div:last-child").css("border-bottom","none");
HTML
<div class="full-width info-block solutions-section">
<div class="field field-name-field-solutions-area field-type-text-long field-label-hidden">
<div class="field-items">
<div class="field-item even" style="border-bottom-style: none;"><h2>A Para</h2>
<div class="full-width solid-block">
<div class="alignleft onethird-width ">
<img border="0" src="sites/all/themes/ourbrand/images/image.png" width="120">
</div>
<div class="alignleft qtr-width small-text dark-grey">
Who is it for? All Text</div>
<div class="clear"> </div>
</div>
<div class="full-width solid-block">
<div class="alignleft onethird-width ">
<img border="0" src="sites/all/themes/ourbrand/images/image.png" width="120">
</div>
<div class="alignleft qtr-width small-text dark-grey">
Who is it for? All Text</div>
<div class="clear"> </div>
</div>
</div></div></div></div>
I think ur selection not only select the child div only. It will take all the div contain in item-field class.
just add '>' before div maybe help.
$(".solutions-section .field-items .field-item > div:last").css("border-bottom","none")
example here http://jsfiddle.net/w6s6puLu/
If I get your problem correctly then you can use :
$(".solutions-section .field-items .field-item div.full-width:last-child").css("border", "2px solid green");
Demo
Just see if it helps!
Related
First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>
I'm using Protractor with Cucumber for my tests, but I can't get an element cause the classname is the same of others classes and it don't have other attribute.
How can i get this element?
The element is: "tileGrid content".
I can't use xpath cause the page is edited sometimes.
Here my html:
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">External Services</h3>
</div>
</div>
</div>
Thank you for your help.
I'm imagining your structure to be something similar to:
<div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">External Services</h3>
</div>
</div>
</div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">Other Header</h3>
</div>
</div>
</div>
<div class="tileGrid content">
<div class="spacing-container undefined">
<div class="title">
<h3 class="h2 heading">Another Header</h3>
</div>
</div>
</div>
...
</div>
There are a few ways you could interact with something like this, but I'll give just 3 examples:
This will look for the first child with the div tag within its parent
by.css('div div.content:nth-of-type(1)')
This will look for the first child with any tag within its parent
by.css('div div.content:nth-child(1)')
This will look for the text inside the h3 tag, and will select the element 3 layers above it:
by.xpath('//*/h3[text()="External Services"]/../../..')
Or find a DIV which includes a H3 and the H3's text is External Services as following:
by.xpath('//div[contains(#class, "tileGrid")][.//h3[text()="External Services"]]')
I have found many examples for different circumstances, but im just not experienced enough to combine them and accomplish the result I want. I am trying to create a TamperMonkey/GreaseMonkey script to highlight a DIV that matches a particular image source.
The website code is as follows, I cannot change it, but I removed the URL for the image and excess code so its easier to read:
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Im looking for code to search for image-source-#, and change the background color of the listing-row DIV when I find it (for example, search for image-source-2.jpg and change listing_row to green).
$('img[src="image-source-2.jpg"]').parent().css('background-color','red');
div{
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Below my div content list
I want to add same type of div having class (commentClass) with different content at the last of commentClass div
<div style="padding-top: 12px;" class="col-md-10 commentClass">
<div class="col-md-1"><img class="circle" src="../upload/default.png"></div>
<div class="col-md-11">
<p><label>#test22222 </label>The lipstick I have been looking for! Usually lip products dry me out, this one did not even without prior mosturizing! Anna is a great nude shade, color stays in place even </p>
</div>
</div>
<div style="padding-top: 12px;" class="col-md-10 commentClass">
<div class="col-md-1"><img class="circle" src="../upload/736988_10151398960426369_650127657_o.jpg"></div>
<div class="col-md-11">
<p><label>gfdg </label>I've had several Nars lipsticks, and would definitely say that the Audacious line is the best.</p>
</div>
</div>
<div style="padding-top: 12px;" class="col-md-10 commentClass">
<div class="col-md-1"><img class="circle" src="../upload/default.png"></div>
<div class="col-md-11">
<p><label>#test </label>Hello guys, previously we have posted a good script to export data from MySQL to CSV File, today we will share another script which would export data from MySQL to excel file.</p>
</div>
</div>
<div id="commentArea" class="col-md-10" style="padding-top: 12px;">
<div class="col-md-1" style="z-index: 1;"><img src="../upload/test333_819.jpg" class="circle"></div>
<div class="col-md-11">
<textarea id="textComment" class="comment-box"></textarea>
</div>
</div>
I tried jquery prepend of id="commentArea" but did not work
commentArea
var commentstring ='<div style="padding-top: 12px;" class="col-md-10 commentClass">test content</div>';
$( "#commentArea" ).prepend( commentstring );
try this it may work for you
var commentstring ='<div style="padding-top: 12px;" class="col-md-10 commentClass">test content</div>';
$("#commentArea").before(commentstring);
your .prepend() method will also work just check the version of jQuery you are using.
this works for me.
$(function(){
$('#btn').click(function(){
$('#bclass').prepend('<div>Hello I was added</div>') ;
});
});
jsbin
Please ignore this question from now. I made a huge mistake. :-)
I have this problem with appending a div (a user div with html in it)from one div to another div. I want to be able to move the "user_u_1"-divs between the containing "regionheader"-divs. Their classes should change also. I have a Fidle prepared.
Right now if a want to append a div from the above div to the second div it appends it to the last one.
the structure is as follows:
<div id="onlineList">
<div class="regionheader" id="one">
<span class="regionspan"><h3>One</h3></span>
<div id="user_u_1" class="One" name="Joe">1</div>
<div id="user_u_2" class="One" name="Joe">2</div>
<div id="user_u_3" class="One" name="Joe">3</div>
</div>
<div class="regionheader" id="two">
<span class="regionspan"><h3>Two</h3></span>
<div id="user_u_4" class="Two" name="Joe">4</div>
<div id="user_u_5" class="Two" name="Joe">5</div>
<div id="user_u_6" class="Two" name="Joe">6</div>
</div>
<div class="regionheader" id="three">
<span class="regionspan"><h3>three</h3></span>
<div id="user_u_7" class="three" name="Joe">7</div>
<div id="user_u_8" class="three" name="Joe">8</div>
<div id="user_u_8" class="three" name="Joe">9</div>
</div>
</div>
You have a typo in your HTML.
The offending line:
<div id="user_u_4" class="Two" name="Joe" >4<html/div>
Should be:
<div id="user_u_4" class="Two" name="Joe" >4</div>
Updated fiddle that works.