HTML:
<div id="my-id">
<li class="list_element">
<div class="my_class"></div>
</li>
<li class="list_element">
<div class="another_class"></div>
</li>
<li class="list_element">
<div class="class3"></div>
</li>
</div>
What I want to do with behat/mink:
$page = $this->getSession()->getPage();
$selector = $page->find('css', "#my-id .my_class"); //here I need anchor element located near to .my_class div.
I don't know in which one .list_element .my_class div is. I know only anchor is next to .my_class element. Which selector should I use in the find() function?
Try one of these:
#my-id .my_class ~ a
#my-id .my_class + p
#my-id .list_element a
This is too basic question.Please see more here w3schools
Related
Say I have the following:
<div class="data">
<h2 class="entry-contentH2">Preparation</h2>
<h2>Airplanes</h2>
<ul>
<li><strong>3 large</strong> wings</li>
<li><strong>2</strong>doors</li>
</ul>
<h2>Car</h2>
<ul>
<li><strong>4</strong> doors</li>
<li><strong>1 cup</strong> holder</li>
</ul>
<h2 class="stopHeader">Execution</h2>
<h2>Motorcycles</h2>
<ul>
<li>Easy to learn</li>
</ul>
</div>
I'm trying to get query all of the <p></p> tags text after the <h2>Preparing</h2>, but I want it to stop at the last <p></p> before the stopHeader class.
This is the code that I came up with:
//h2[contains(.,"Preparation")]/following-sibling::h2/text()[not(preceding::h2[#class="stopHeader"])]
#and also
//h2[contains(.,"Preparation")]/following-sibling::h2/text()[not(preceding::h2[contains(., "Execution")])]
Try below XPath to get desired output:
//h2[.="Preparation"]/following-sibling::h2[./following-sibling::h2[.="Execution"]]/text()
This should return text content of each header (h2) between "Preparation" and "Execution"
Try this xpath.
//h2[text()='Preparation']/following::h2[not(#class='stopHeader')]/text()
I need to get node path of jstree element ,I using this code :
$(function () {
$('#jstree').jstree();
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
if (data.action == "select_node") {
var node_path = data.instance.get_path(data.node, "/");
console.log(node_path)
}
});
});
But I get unexpected space character (You can see in console.log() function)
http://jsfiddle.net/3q9Ma/741/
I need a pretty path like this : Folder1/children 1
Please tell me what wrong .
Thank you
The problem actually with the HTML in your fiddle. It looks like this:
<div id="jstree">
<ul>
<li>Folder 1
<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Folder 2</li>
</ul>
</div>
The get_path function is doing exactly what it is supposed to - taking the text from the parent <li> followed by the text from the child <li>. What is happening is that the text from the parent Folder 1 is actually 'Folder/n ', which is causing your problem. I see why you have your HTML structured the way you do, since the example on jstree tells you to do it this way. A way around it would be to remove the line break after your Folder 1. It looks terrible, but it will make your get_path function work:
<div id="jstree">
<ul>
<li>Folder 1<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
<li>Folder 2</li>
</ul>
</div>
When I use Summernote and jQuery UI Sortable, I can sort items but cannot input text into the textareas. How can I accomplish it?
HTML
<ul class="sortable-list">
<li>
<h2>Textarea 1</h2>
<textarea name="textarea_1" id="textarea_1" class="summernote">
</textarea>
</li>
<li>
<h2>Textarea 2</h2>
<textarea name="textarea_2" id="textarea_2" class="summernote">
</textarea>
</li>
<li>
<h2>Textarea 3</h2>
<textarea name="textarea_3" id="textarea_3" class="summernote">
</textarea>
</li>
</ul>
JavaScript
$('.summernote').summernote();
$('.sortable-list').sortable({
axis: 'y'
}).disableSelection();
Please see also jsfiddle:
http://jsfiddle.net/L4pq1fad/
I got the answer in GitHub issue.
https://github.com/summernote/summernote/issues/1174#issuecomment-115235983
The JS should be:
$('.summernote').summernote();
$('.sortable-list').sortable({
handle: "h2",
axis: 'y'
});
sanchezzzhak created jsfiddle: http://jsfiddle.net/sanchezzzhak/L4pq1fad/3/
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.
I have this piece of HTML
<div id="fileTreeInviati">
<ul class="php-file-tree">
<li class="pft-directory">
A006 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-png">
cut.png
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A012 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-jpg">
04.jpg
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A014 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-txt">
acu.txt
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
</ul>
I'm working on a js snippet that cycle through all "a" of the "li" and checks if it has the class "new" if yes increment a counter by one. This counter now has to be printed on the relative "li" "span" 3 level before.
So I have the number of the element with the "new" class.
The js snippet is this
$("#fileTreeInviati .php-file-tree .pft-directory li").each(function(){
$(this).children("a").each(function(i,e){
if ($(e).hasClass("new")){
cont++;
console.log($(e).text());
$(this).parent().parent().parent().children("a").children("span").text(cont);
}
})
cont = 0;
});
I think I'm almost there but the counter is always 1. I think there is something mess with .children, maybe it can handle only the first occurrence?
Thanks for help
Why not just use .length instead?
$('#fileTreeInviati .php-file-tree .pft-directory li a.new').length;
Update: If you want to count every li element separately, use this:
$('#fileTreeInviati .php-file-tree .pft-directory li').each(function() {
alert($('a.new', this).length);
})
OK, I figure out how to do the magic:)
Here it is:
cont = 0;
$('#fileTreeInviati .php-file-tree .pft-directory').each(function() {
$(this).children("ul").children("li").children("a.new").each(function(i,e){
cont++;
$(e).parent().parent().parent().children("a").children("span").text(cont);
});
cont=0;
});
Now all works perfect. If you think this can do in a better way, lemme know.
Bye