On this page:
https://weargustin.com/store?filter=all
Why is the first element of this selector:
$('div.funded.product:nth-child(3n)')
The second element of
$('div.funded.product')
?!
The problem is that nth-child loops over all children and tests them against the selector. It does not use the selector and then loop over those that match. So as PSL mentioned, the other items you have which are siblings are throwing the whole thing off.
Here's an example fiddle to break it down: http://jsfiddle.net/Ga5Jq/
<div>
<p>test</p>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
$(function() {
alert($("div span:nth-child(3n)").html());
});
The above code alerts 2 because the second span is really the third child of div matching the selector, span.
I think you want to select every 3rd of that type so you should try using nth-of-type instead of nth-child since there are many other siblings to start with other than div.funded.product. For instance you have the div .product.funding also coming in as the child of the same parent.
$('div.funded.product:nth-of-type(3n+1)')
See :nth-of-type
Related
How do we use tinymce in a class used multiple times, except the first time ?
I was looking at multiple tinymce textareas but could not find fully as what I wanted.
I have .wp-editor-area used multiple times, but do not want the mce in the first instance.
I had used :
<script>
tinymce.init({
selector: ".wp-editor-area"
})
</script>
Effectively you cannot "skip" any elements that match the selector's value - there is no configuration to do that.
Can you add a second class? Do the textareas in question also have an id? If you don't want to have one of these textareas match the selector you will need to find a selector that does not match that first textarea.
I have one Anchor widget as
<td class="GAS3MDBHJ">
<div class="GAS3MDBJJ">
<a class="gwt-Anchor" href="#export">Export</a>
</div>
</td>
I would like to remove this anchor element from it's root. How can I achieve it.
If I use widget.getParentElement() , I need to write as ...
myanchor.getElement().getParentElement().getParentElement().removeFromParent();
Now it is in third level.If my widget is in level 7 or 8 or 9 , am I need to write getParentElement() repeatedly ?
Has there anyway for fast code ?
I don't want to get it's parent element, I really want to get was outermost element.
You should simply call
anchor.removeFromParent();
It will remove the entire anchor element with all of its inner HTML. The result will be exactly the same if you call
anchor.getElement().removeFromParent();
because anchor.getElement() will give you the outer most element of this widget, just as you wanted.
If you start calling getParentElement(), you will remove more than your anchor widget.
I am wondering if it is possible to use Knockout.js's ko.applyBindings() multiple times to bind different ViewModels to one part of a page. For example, let's say I had this:
<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);
I am now applying two ViewModel bindings to <div id="foo>. Is this legal?
You do not want to call ko.applyBindings multiple times on the same elements. Best case, the elements will be doing more work than necessary when updating, worse case you will have multiple event handlers firing for the same element.
There are several options for handling this type of thing that are detailed here: Example of knockoutjs pattern for multi-view applications
If you really need an "island" in the middle of your content that you want to call apply bindings on later, then you can use the technique described here: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html
This is a common road block that comes when implementing JqueryMobile-SPA.
The method : ko.applyBindings(viewmode,root dom element) accepts two arguments. The second argument comes helpful when you have multiple VM's in your page.
for example :
ko.applyBindings(model1, document.getElementById("view1"));
ko.applyBindings(model2, document.getElementById("view2"));
where view1 and view2 are the root dom element for that model. For a JqueryMobile-SPA this will be the page ids for corresponding model.
The best way to do this would be use the "with" binding construct in the div that you want the partial view model to be bound. You can find it in this fiddle
<div data-bind="with: model">
<p data-bind="text: name"></p>
</div>
<div data-bind="with: anothermodel">
<p data-bind="text: name"></p>
</div>
var model = {
name: ko.observable('somename'),
}
var anothermodel = {
name: ko.observable('someanothername'),
}
ko.applyBindings(model);
Also check out the "with" binding documentation on the Knockout site, to look at an AJAX callback - partial binding scenario.
My english is very bad.... =)
I use Sammy to load partial views, and Knockout to bind the Model, I try use ko.cleanNode but clean all my bindings, all DOM nodes has changed when has a bind, a property __ko__ is aggregated, then i removed that property with this code, and works !!, '#main' is my node.
var dom = dom || $("#main")[0];
for (var i in dom) {
if (i.substr(0, 6) == "__ko__") {
delete (dom[i]);
break;
}
}
after use Ggle translator:
I use Sammy for the load of partial views, and Knockout for the bind the Model, I try to use ko.cleanNode but clean all my bindings, all DOM nodes has changed when they has a bind, a property ko is aggregated, then i removed that property with this code, and works !!, '#main' is my node.
Let's say I create an HTMLPanel with some HTML like:
<p>
Blah blah <span id='1'>more html... </span>
</p>
Now I want to attach an event handler to the span. I want to see it as an InlineHTML GWT widget. I tried:
HTMLPanel html = new HTMLPanel(stringOfHTML);
parentWidget.add(html);
String id = "1";
Element span = html.getElementById(id);
InlineHTML wid = InlineHTML.wrap(span); // -- error here
html.addAndReplaceElement(wid, id);
The second-to-last line dies with the AssertionError: A widget that has an existing parent widget may not be added to the detach list.
Is there a way to wrap sub elements in a HTMLPanel?
This is GWT 2.4.
Note
After a few comments and answers I realized that I forgot to mention: usually UiBinder is the answer here, but I'm not using it because the input is html text created in another context by non-programmers.
No, not really. You getting this exception because <span> element is already a part of some widget. wrap methods can be used only to create widgets on top of elements which are not part of some other widget. If you want to handle clicks on this span, you can add dom handler to the HTMLPanel, and then detect which element was clicked.
Convert your <span> into an InlineLabel inside your UiBinder template and attach anything you want to it :).
I am trying to select the surround element when a image within the span is clicked 'remove()', but I am a little new to jQuery and can't figure out how to do it. I can't use a unique id as the element are generated dynamically.
For example:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='remove()' />Example</span>
I want to select the span when the image is clicked.
Here is an example to hide the parent element of the image:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='$(this).parent().hide();' />Example</span>
The trick is to use "this" and the parent()-function.
Cheers,
Chris
Look at this (for selector) and this (for event)!
Also W3schools provide Good example for first step in Jquery.
How about .parent() http://api.jquery.com/parent/