I need to select the element 2 up from my current element. Normally you can use the .prev() to find the previous element but I need to find the one previous to this. Whats the simplest way to find this?
var animation = $("div.services-block").prev();
I need to find the div before services-block and load that into a variable.
My structure as an example
<div class="wrapper">
<div class="services-block-item"></div>
<div class="services-block-item-match"></div>
<div class="services-block-item"></div>
<div class="services-block"></div>
</div>
Say my current element is services-block, I need to find and grab services-block-item-match. (but this class name can change)
If your "this current element" changes, some code like the following might be useful:
I used a different example: http://jsfiddle.net/swm53ran/5/ to illustrate the ability of $(this) with the .prev().prev() that may be helpful for your problem.
$(this).prev().prev().css('color', 'red');
In this fiddle illustration, a link is clicked and then jquery changes the element that is 2 spots ahead of it to have red colored text. There are four links, so if you click 4, link 2 will be red, if you click 3, link 1 would be highlighted.
Hope this helps!
var animation = $(".services-block").prev().prev();
Related
On a web page we have a list of profiles. On the right hand side of the profile is some text, followed by an arrow img#arrow.
When img#arrow is clicked, we have the following jQuery we hope to run:
However, the corresponding .bottom-sec is not toggling.
jQuery('#arrow').click(function(){
var $parent = $(this).parent();
$($parent).addClass('active');
jQuery($parent +' .bottom-sec').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-right">
<h2>Bob Brown</h2>
<h3>Non-Executive Chairman</h3>
<p>Intially showing text.</p>
<div class="bottom-sec" style="display: none;">
<p>Initially hidden text.</p>
</div>
<img id="arrow" src="/wp-content/themes/wtc/images/icons/down-arrow-circle-hi.png">
</div>
Problem
The problem with your code is exactly what the comment on your question is saying, but he didn't explain anything:
You're combining two different ways of selecting elements. One is with selectors, the other is traversing. You're using them in a way which isn't possible (the $parent + ' .bottom-sec' part). The comment linked to a jQuery page about traversing which you should definitely read! It tells you a lot about how to use traversing functions, which you could use!
Solution
There are multiple solutions to this, but I'll write down the one I think is the best:
First of all, change the HTML a bit. I've removed the element style of .bottom-sec and changed the id of the image to a class, because you have multiple images with the same id on the page, which is not a recommended thing to do. Classes can occur more than once, id's cannot.
<div class="profile-right">
<h2>Bob Brown</h2>
<h3>Non-Executive Chairman</h3>
<p>Intially showing text.</p>
<div class="bottom-sec">
<p>Initially hidden text.</p>
</div>
<img class="arrow" src="/wp-content/themes/wtc/images/icons/down-arrow-circle-hi.png">
</div>
I've reduced the JavaScript to the following. Note that is just reduced to one line, where a click on the .arrow element goes searching for the closest .profile-right parent. If, for whatever reason, you decide to change the HTML and the .arrow element is no longer a child of the .profile-right, this code still works. The only thing it does is toggle an active class on the .profile-right.
jQuery(document).on('ready', function() {
jQuery('.arrow').on('click', function(){
jQuery(this).closest('.profile-right').toggleClass('active');
});
});
The document ready listener was added because of OP's comment.
With CSS, we can use the new .active class to show or hide the element.
.profile-right .bottom-sec {
display: none
}
.profile-right.active .bottom-sec {
display: block
}
Original Code Fix
If for some reason you wanted to use your original code, this is how it should be:
// Nothing wrong about this part.
// Your only worry should be that there could be
// multiple elements with the same ID, which is something really bad.
jQuery('#arrow').click(function(){
// This part is correct, no worries
var $parent = $(this).parent();
// Removed the $(...), because $parent is already a jQuery object
$parent.addClass('active');
// Changed the selector to a find function
$parent.find('.bottom-sec').toggle();
});
You could also combine all of the code inside the listener function to just one line:
jQuery('#arrow').click(function(){
$(this).parent().addClass('active').find('.bottom-sec').toggle();
});
Change your js code like below.
jQuery('#arrow').click(function(){
var $parent = $(this).parent();
$($parent).addClass('active');
jQuery($parent).find('.bottom-sec').toggle();
});
In your event listener you can catch the element (the down arrow) that triggered the event. It will be referred as this.
Then you can go through the DOM tree using .next() and .parent() to access the <div> to toggle.
Note: you may need more functions than the one I explained above.
Note 2: without code or more detailed information, we can't help you further, I will edit this answer if you add details.
This piece of code appears in a js script I have been asked to modify - I'm not sure why it is written in this way, it doesn't make sense to me.
Can anyone help explain what it is doing, and if it can be simplified to be a little more meaningful?
var unformathtml = $(this).text();
if(unformathtml.trim().length>showChar) {
$(this).parent().parent().parent().parent().parent().find('.comment-footer').fadeOut();
}
Lets' pretend we have a DOM like this:
<parent-5>
<target-element>Content</target-element>
<parent-4>
<parent-3>
<parent-2>
<parent-1>
<focused-element>Some Text</focused-element>
</parent-1>
</parent-2>
</parent-3>
</parent-4>
</parent-5>
What this code is saying is "if the text inside of <focused-element> has more characters than showChar then fade out <target-element>.
A better way of doing this would be to give <parent-5> some kind of identifier, which could be an ID or a class, and target that instead of the repeated .parent() call.
Here's an example which showcases the idea:
$('#oldMethod').click(function() {
$(this)
.parent()
.parent()
.parent()
.parent()
.parent()
.find('.comment-footer')
.toggleClass('red');
});
$('#newMethod').click(function() {
$(this)
.closest('.comment-container')
.find('.comment-footer')
.toggleClass('red');
});
.red {
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
<div>
<div>
<div>
<div>
<button id="oldMethod">Old</button>
<button id="newMethod">New</button>
</div>
</div>
</div>
</div>
<div class="comment-footer">Footer</div>
</div>
Wow, that really doesn't make much sense. It is doing this:
1) Getting the raw contents out of an element
2) Checking to see if it is longer than a certain length
3) If so, fading out another element on the page
The parents() thing is very error-prone. It is going up a very precise number of levels in the HTML tree and then descending downwards to find an element with a class of '.comment-footer'. As a result a slight rearrangement of either element in the DOM might result in the code no longer working, because it can't find the specified element.
What you want is to find the tag-to-hide more directly. Ideally, the element-to-hide and the element-that-decides-to-hide would be next to eachother in the DOM (i.e. the element being hidden would be a child or sibling of the element that decides whether or not to hide it). This makes it very easy for the one to find the other. If that isn't possible, your next best bet would be to simply assign an id to the element you are trying to hide and then select on that id directly:
var unformathtml = $(this).text();
if(unformathtml.trim().length>showChar) {
$('#to_hide').fadeOut();
}
As a quick aside, .text() is used (instead of .html()), because the former removes any HTML tags. This way you are measuring the amount of "actual" text inside $(this) to determine whether or not you want to hide said element. So that part is probably fine.
basically, and in a very schematic way, I need to target the first element who has a specific attribute relative to the element who got the event.
<div data-path="2" class="section">
... Nope.
</div>
<div data-path="1" class="section">
<a data-path="2" class="trigger" href="#">Foo</a>
</div>
<div data-path="1" class="section--2">
... Nope.
</div>
<div data-path="2" class="section--3">
I need to target this one, but not the sections previous to the trigger.
</div>
<div data-path="2" class="section--4">
... Nope.
</div>
I can't figure how to achieve this. It seems to be pretty simple but I'm just stuck on this since two days. I try to play with .next() and .nextUntil() but it doesn't work properly.
Any help are welcome and sorry for my english.
Edit : To be clear, what I need is when a click on the .trigger, I need to target the first next section who has the same data-path attribute, but not the sections before the trigger.
You may want to use the nextAll to get to the next element which has the same property value and then use the first one out of that:
Demo: http://jsfiddle.net/mUt9H/1/
Relevant Code:
$("a").on("click", function() {
var dp = $(this).data("path");
var txt = $(this).parent().nextAll("div[data-path='" + dp + "']").first().text();
alert(txt);
});
Your trigger is an anchor, so first you need to get to its parent div and then traverse to the next elements. Hence, $(this).parent()....
Edit: (regarding your comment)
Just chain a .first() to the statement and you are good to go.
.nextAll("div[data-path='" + dp + "']").first()...
Try:
$('a.trigger').click(function () {
var target = $(this).parent().nextAll('div[data-path="'+$(this).data('path')+'"]').first();
})
jsFiddle example
I am struggling to locate some elements in my angulars JS app using protractor (JS Webdriver).
Heres is my HTML :
<div id="numDispBox" ng-mouseleave="hideNumDisplayBox()" style="display: none;">
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(20)">20</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(40)">40</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(60)">60</div>
<div class="numDispOption transition_2" ng-click="UpdateNbResultPerNode(80)">80</div>
</div>
I would like to be able select the 2nd, 3rd and 4th inner divs.
I have used class name however it did not work :
element(by.css('[ng-click="UpdateNbResultPerNode(60)"]'));
I am not able also to find out the xpath with firebug as when I click on the inspector my submenu goes away even when I block JS mutation.
Thanks
I would use XPath to find this element.
The code would look like this:
driver.findElement(By.xpath("//div[#ng-click='UpdateNbResultPerNode(60)']"));
You can also do this by referencing the text like this:
driver.findElement(By.xpath("//div[text()='60']"));
Or maybe you need to first find the parent div:
driver.findElement(By.xpath("//div[#id='numDispBox']/div[text()='60']"));
I have a video on how to utilize XPath with webDriver at:
http://community.neustar.biz/community/wpm/load_testing/blog/2013/11/19/utilizing-xpath-to-interact-with-elements
Brian Kranson
Neustar, Inc. / Professional Services Engineer
There are many ways to do this,let me list two selectors which can locate the required elements.
The one which Whitney Imura has mentioned would be a good option.
css = #numDispBox div:nth-child(n)
In your case n can be 1,2 or 3 to locate 2nd, 3rd or 4th div element.
you can also try using + to locate its sibling.
For example, to locate the 2nd div element the following selector would work.
css = #numDispBox > div + div
In ruby, you can do (it's the same concept for what you're trying to do with the JS Webdriver):
driver.find_element(:css, '#id .class:nth-child(1))
You can also use element.all:
element.all(by.css('#numDispBox numDispOption')).then(function(items){
items[1].click();
items[2].click();
items[3].click();
});
or
element.all(by.css('#numDispBox numDispOption')).get(1)
element.all(by.css('#numDispBox numDispOption')).get(2)
element.all(by.css('#numDispBox numDispOption')).get(3)
I have a function here for centering an element within it's parent.
Check out the demo: http://jsfiddle.net/kE9xW/1/
right now it's only applying the centering to the first element, how do i make the function loop itself so it centers every #element on the page. the demo is self explanatory, thanks!
There are a few things you need to do.
As already suggested, id's must be unique, so change the id="..." to class="...". You will also need to change your css to be based on the class not the id (change #element' to '.element')
<div class="container">
<p> ... </p>
<div class="element">
</div>
</div>
Use each in your method to loop over all elements selected by the selector $('.element').
element.each(function(){
// work here in $(this) for the current element
});
You forgot to take the top of the parent div into account, which made all elements overlap each other. So your yPas becomes:
var yPos = $(this).parent().position().top +
parseInt($(this).parent().css('height'))/2 -
parseInt($(this).css('height'))/2 - yPosFromCenter;
Check the working fiddle: http://jsfiddle.net/H99DT/
First, the easiest but most important part: change your IDs to classes. IDs must be unique per page so jQuery's ID selector and JavaScript's document.getElementById() function are only going to give you the first matching element:
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM.
Change
<div id="container">
...
<div id="element">
to
<div class="container">
...
<div class="element">
and change
$('#element')
to
$('.element')
Next, the more difficult part: you are currently issuing one centerDiv() call to your elements with coordinates from center of 0, 0. That's going to take all your .elements and position them at the exact same spot.
If that's not what you intend, you're going to have to loop through them using .each() and decide the xPosFromCenter and yPosFromCenter in each iteration. It's not clear to me yet how your function works so you may have to explore on your own and see what you can come up with.
Scratch that, see Jamiec's working example for the solution.
Change Id to class in you divs, then make container's position relative with css, and I'll suggest make jQuery plugin from your function. See results http://jsfiddle.net/kE9xW/1/