Suppose that, i got this pseudocode:
itemset1[apple,orange]
itemset2[banana,potato]
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li>itemset1[]</li>
</ul>
</div>
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li>itemset2[]</li>
</ul>
</div>
Is there any way that letting me write only once the html code? like
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li>items</li>
</ul>
</div>
and reveals twice like the first example(one for itemset1 and one for itemset2) i can use evrything javascript or php but prefer javascript
There're two ways (or more?). Rendering with PHP or JavaScript.
With PHP at view
For example, using foreach ($itemset1 as $item) probably what you want.
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<?php foreach ( $itemset1 as $item ) { ?>
<li><?php echo $item ?></li>
<?php } ?>
</ul>
</div>
With JavaScript
In this case, I'm using AngularJS for rendering data. Assuming you have known what AngularJS is and have been prepared for that.
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li ng-repeat="item in itemset1">{{ item }}</li>
</ul>
</div>
Of course, If you like, jQuery is also a good choice for you. But hate the jQuery append expression. And it's inconvenient.
See that reference:
PHP: foreach - Manaual
AngularJS: API: ngRepeat
Sure but now i have to write
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li ng-repeat="item in itemset1">{{ item }}</li>
</ul>
</div>
<div>
<header>
<h3>Mylist</h3>
</header>
<ul>
<li ng-repeat="item in itemset2">{{ item }}</li>
</ul>
</div>
Any way that i can avoid writing twice all of this div,header,ul,li elements?
Related
I want to show errors with alerts using bootstrap, how do I do with vuejs?
This is my code:
<div v-if="this.getError">
<div v-for="(_errors, key) in this.getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error}}</li>
</ul>
</div>
</div>
And This is Json :
https://i.stack.imgur.com/AkBmJ.png
Try to remove "this" keyword in your template. It causes some issues there, specially with v-for loops.
<div v-if="getError">
<div v-for="(_errors, key) in getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error}}</li>
</ul>
</div>
</div>
This code is after the browser's loaded. I need to change the li class buddyName - "Strider" to "Aragon".
<script src="./scripts/fellowship.js"></script>
<main>
<section id="Middle-Earth">
<article class="the-shire">...</article>
<article class="rivendell">
<h1>Rivendell</h1>
<aside>
<ul id="myBuddy">
<li class="buddyName">Gandalf the Grey</li>
<li class="buddyName">Legolas</li>
<li class="buddyName">Gimli</li>
<li class="buddyName">Strider</li>
<li class="buddyName">Boromir</li>
</ul>
</aside>
</article>
<article class="morder">...</article>
</section>
</main>
This was my most recent attempt but not working:
document.querySelectorAll('buddyName'[3]).innerHTML = "Aragorn";
You would use getElementsByClassName to get all li tags. The next step is select the fourth element of the array and change the value.
document.getElementsByClassName('buddyName')[3].innerHTML= "Aragorn";
Hello I trying to dropdown a div using jquery with css. On my page I have a drop down and I use .click to toggleClass.
This is the html and jquery
<div class="service">
<div class="service-btn">
<h3>head</h3>
</div>
<div class="service-info">
some text
</div>
</div>
$('.btn-service').click(function() {
$('.service-info', this).toggleClass('open');
});
For some reason this does not work. Even though earlier on the page I use
<li class="btn-dropdown">
<ul class="nav-dropdown">
<li>list item</li>
<li>list item</li>
</ul>
</li>
$('.btn-dropdown').click(function() {
$('.nav-dropdown', this).toggleClass('open');
});
and this does work. When I say it works I mean that the class is toggled and added to the html tag.
The one that doesnt work does not add/remove the class with toggleClass. Nothing happens at all and the jquery never gets triggerd by click.
The jquery part of the code is the same with the exception of class names so why doesn't the service code work like the dropdown code. Is it the html?
There is no ".btn-dropdown" like Felix Kling said.
"<div class="service">" should be changed to "<div class="btn-dropdown">
<div class="service-btn">
<h3>head</h3>
</div>
<div class="service-info">
some text
</div>
</div>
$('.btn-dropdown').click(function() {
$('.service-info', this).toggleClass('open');
});
the "click" function responds to the preceding selector element. You could also replace "$('.btn-dropdown').click" with "$('.service').click" it should return a similar result
I hope this code can help you .
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="service">
<div class="service-btn">
<h3>head</h3>
</div>
<div class="service-info">
some text
</div>
</div>
<li class="btn-dropdown">
<div class="btn-dropdownLi">
<h3>LI Toggle</h3>
</div>
<ul class="nav-dropdown">
<li>list item</li>
<li>list item</li>
</ul>
</li>
<script>
$('.service-btn').click(function() {
$('.service-info').toggle('');
});
$('.btn-dropdownLi').click(function() {
$('.nav-dropdown').toggle('');
});
</script>
</body>
</html>
I would like to find the class of the parent element of the child with .current.
var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
but it always throws me undefined
NOTE: I don't know which a currently has .current which is why I have to use the .find() method.
Your code should already work, but it might be more reliable to access the property className instead:
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
This will work:
var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);
I'm simply transforming the found collection into a jQuery object again.
See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/
Ps.: If more than one a has class="current", only the first one will be retrieved.
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>