Is there a way to easily have parallel html structures using jQuery? For example:
<li class="ul-1"> list 1 </li>
<li class="ul-2"> list 2 </li>
<li class="ul-3"> list 3 </li>
<div class="div-1"> div 1 </div>
<div class="div-2"> div 2 </div>
<div class="div-3"> div 3 </div>
Putting the div's inside the ul's isn't an option for me, they need to remain separate. I want to do something like $('.ul-2').show(), and also have it show $('.div-2). Is there a way to do this without getting a list of classes and parsing the class names?
As j08691 pointed out, I was able to use jQuery's index() function to relate two separate html structures to each other.
http://api.jquery.com/index/
Related
I couldn't find anything on this. I have a simple website done in Jquery, CSS and HTML. I have a list of hundreds of products stored in a local folder. Once a product is clicked, the user should be able to see a picture of the specification on another page. The page/pages have the same HTML structure, just name and pictures are different. What is the best way to go about it? Do I create a new HTML for each product? Or should I use the same Html page to render different names and pictures? If so, how does this page determine what product was clicked? Right now I am using href to direct to different html pages, but I dont think this is the optimal way of doing it. If I use a single page to gernerate different content, how do I pass in whats being clicked?
<ul id="denison-single-pump-menu" class="container collapse">
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v10_v20_series.html">V10-V20 Serires</a></li>
<li class="col">V10</li>
<li class="col">V20</li>
</div>
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v_series.html">V Serires</a></li>
<li class="col">20V</li>
<li class="col">25V</li>
<li class="col">35V</li>
<li class="col">45V</li>
</div>
</ul>
hi i will try to solve your problem, you can make modal on the same html page. you can see here how to make modal https://www.w3schools.com/bootstrap/bootstrap_modal.asp. to differentiate you can replace the id of the modal and the data-target, by using looping or retrieving unique data from your data ex: id. hopefully this can solve your problem.
I've created a custom multifield component (titled "breadcrumbs") that will be used as a page's breadcrumbs nav. Each multifield item consists of a textfield and a pathbrowser. I want to list out each multifield item as an anchor tag with the "text" property as the text and the "link" property as the href.
right now, i just have my html listing out the properties as follows:
<div>
<p>${properties.text}</p>
<p>${properties.link}</p>
</div>
which outputs this to the page:
text 1,text 2
link 1,link 2
I know how to use data-sly-list and data-sly-repeat for each of the properties to get a list of all the texts and links like this:
<ul data-sly-list="${properties.text}">
<li><p>${items}</p></li>
</ul>
<ul data-sly-list="${properties.link}">
<li><p>${items}</p></li>
</ul>
but is there a way to list out both properties into one element that would look something like this:
<ul data-sly-repeat.breadcrumbs="${properties}">
<li>
<a href="${breadcrumbs.text}">
${breadcrumbs.link}
</a>
</li>
</ul>
I have also tried data-sly-use with a custom js file, but also can't get multiple properties to loop in one element.
I'd strongly recommend going with a multifield that stores the fields as JSON or nodes like ACS multifield so you get a better data structure for your purpose. I do not recommend the below solution unless you are 100% certain that both link and text are going to be the same length AND in the correct order.
that said, assuming text and link are each multivalued properties, here is what you can do:
<ul data-sly-list.textItem="${properties.text}">
<li>
<a data-sly-attribute.href="${properties.link[textItemList.index]}">
${textItem}
</a>
</li>
</ul>
this will print:
ul>
<li>
<a title-href="link1">
</a>
</li>
<li>
<a title-href="link2">
</a>
</li>
</ul>
since the var name for data-sly-list, the custom identifier textItemList is created. We are interested in the member index on textItemList and use that to display the item at the same index in link by doing: properties.link[textItemList.index]
read more about data-sly-list in the spec
*note: you can also do this with the data-sly-repeat
I have this following hierarchy, and this is used at several places (so to add a class to them via jQuery is not feasable).
<li class="paginable">
<span id="step-1" class="done"></span>
</li>
<li class="paginable">
<span id="step-2" class="done"></span>
</li>
<li class="paginable">
<span id="step-3" class="done"></span>
</li>
<li class="paginable">
<span id="step-4" class="not-done"></span>
</li>
<li class="paginable">
<span id="step-5" class="not-done"></span>
</li>
On the basis of the class done on element span, I have to provide certain style to those span[id^="step-"] which are also having the class done.
But not including the last span with class done.
How can I exclude the last span with class done. The classes done and not-dont changes in order like a series of steps.
I've tried:
span[id^="step-"].done:not(-- with lots of combinations of last child on parent as well as child --)
But it won't work and I logically know why.
Any suggestions CSS ONLY? or should I go and add class everywhere it is switched using jQuery?
I don't think a css only solution is available.
Using jQuery
$('span.done[id^="step-"]').not(':last').css('color', 'red')
Demo: Fiddle
I am trying to get sortable to work.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
</li>
</ul>
I can't seem to grab and drag anything. The important part of this question is the 3 div's in the li
I admit, I don't understand what this line in the docs means: "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)."
And I am able to get it to work with a table.
Any insights?
Yes, the docs do say "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)." which makes it hard to have 3 divs in the li. However, there is a solution.
You can use tg-dynamic-directive (at https://github.com/thgreasi/tg-dynamic-directive) to solve this. Don't forget to include it, and put 'tg.dynamicDirective' in your dependencies. Basically you take out the middle part in between the li tags, in this case the 3 divs, and you put it in another file and link to it.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
</li>
</ul>
Then in another file put the innards, like innards.html:
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
And replace the innards with:
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
And in your controller put something like:
$scope.getView = function(item) {
if item {
return 'innards.html';
return null;
};
Anyways the docs go over it pretty well. I realize this question is pretty old but I just ran into this myself and got it working so hopefully it helps someone else.
I've got a code you see below:
<div class="categories-list">
Description One
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:
<div class="categories-list">
<h2>Description One</h2>
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.
Simple wrap can't do the job until you walk over the contents of the element:
$(".categories-list").contents().first().wrap("<h2 />");
DEMO: http://jsfiddle.net/MDhvY/