I have a div and inside of this, there are a lot of spans as follows:
<div id="mydiv">
<span id="first_id" itemindex="0">first span</span>
<span id="second_id" itemindex="1">second span</span>
<span id="third_id" itemindex="2">third span</span>
...
</div>
I want to define the function "getItemIndexValues()" in JQuery who get all values in "myDiv". It is possible?
You want to be using data- prefixed attributes.
HTML:
<div id="mydiv">
<span id="first_id" data-itemindex="0">first span</span>
<span id="second_id" data-itemindex="1">second span</span>
<span id="third_id" data-itemindex="2">third span</span>
</div>
JavaScript:
var arr = $( 'span', '#mydiv' ).map( function () {
return $( this ).data( 'itemindex' );
}).get();
Here, arr will be [ '0', '1', '2' ]
Live demo: http://jsfiddle.net/fQJAk/
Btw, if you prefer an array of numbers, do this:
return +$( this ).data( 'itemindex' );
-------^
I didn't verified it but I think this should work:
$("#mydiv>span").each(function(a,b){
alert($(b).attr('itemindex'));
});
By using the child selector here: http://api.jquery.com/child-selector/
Related
I have a dynamically created checkbox list and I'm having trouble to check the some trues according to a pre-defined list.
HTML:
<div class="row">
<div class="example-container col-md-6">
<div *ngFor="let atribuicao of atribuicoesOcorrencia" formArraylName="inputAtribuicaoOcorrencia">
<mat-checkbox [value]="atribuicao.id" (change)="onChange(atribuicao, $event)">
<div style="white-space: pre-wrap;">
{{ atribuicao.descricao }}
</div>
</mat-checkbox>
</div>
</div>
</div>
CLASS TS:
I try populate formControl name inputAtribuicaoOcorrencia in a list, in this case
the only one checekd was id 3, but nothing happens
this.atribuicoesOcorrencia.forEach(listAtibuicoes=> {
ocorrencia.atribuicoesDTO.forEach(x => {
if(listAtibuicoes.id == x.id){
this.formCadastro.get('inputAtribuicaoOcorrencia').setValue('checked');
}
});
});
CLASS TS2:
Or the code bellow for one ID checked only
this.formCadastro.patchValue({
inputAtribuicaoOcorrencia: 'checked',
});
You need to use the [checked] attribute for the mat-checkbox
// example
<mat-checkbox
[value]="atribuicao.id"
[checked]="atribuicao.id" // This is what you need to add. If id is there, it will get checked
(change)="onChange(atribuicao, $event)"
>
<div style="white-space: pre-wrap;">
{{ atribuicao.descricao }}
</div>
</mat-checkbox>
I have a DOM tree and would like to use cypress to do e2e testing.
<div class="this-is-an-array">
<div class="array-item-element">
...
</div>
<div class="array-item-element">
<div class="very">
<div class="deep">
<div class="child">
<div class="element">
Expected Content
</div>
</div>
</div>
</div>
<div class="another">
<div class="component">
<div class="dom">
<div class="tree">
<button>ButtonToClick</button>
</div>
</div>
</div>
</div>
</div>
<div class="array-item-element">
...
</div>
</div>
I would like to filter out expected item by asserting on its one child component and click on its another child button through possible code like this:
cy.get('.this-is-an-array') // get the root node of array
.find('.array-item-element') // looping over all items
.should(($el) => {
// the very deep child element should contain text of 'Expected Content'
})
.get('.another .component .dom .tree button')
.click()
How can I write the should clause to achieve this?
Without fully understanding what you're trying to do, I think what you need is cy.within():
cy.get(`.this-is-an-array`)
.find(`.array-item-element`).then( $elems => {
$elems.each((idx, elem) => {
cy.wrap(elem)
.should(elem => {
// assert on child element
})
// ensure all subsequent DOM commands are scoped within
// the wrapped DOM elem
.within(() => {
cy.get(`.another .component .dom .tree button`)
.click();
});
});
});
I created a simple real-time chat application using vue js in laravel.
I am having a problem with the automatic scroll of the div when there is a new data.
What I want is the div to automatically scroll down to the bottom of the div when there is a new data.
Here is my code so far.
Chat.vue file
<template>
<div class="panel-block">
<div class="chat" v-if="chats.length != 0" style="height: 400px;" id="myDiv">
<div v-for="chat in chats" style="overflow: auto;" >
<div class="chat-right" v-if="chat.user_id == userid">
{{ chat.chat }}
</div>
<div class="chat-left" v-else>
{{ chat.chat}}
</div>
</div>
</div>
<div v-else class="no-message">
<br><br><br><br><br>
There are no messages
</div>
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
</div>
</template>
<script>
export default {
props: ['chats','userid','adminid'],
}
</script>
ChatComposer.vue file
<template>
<div class="panel-block field">
<div class="input-group">
<input type="text" class="form-control" v-on:keyup.enter="sendChat" v-model="chat">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" v-on:click="sendChat">Send Chat</button>
</span>
</div>
</div>
</template>
<script>
export default{
props: ['chats','userid','adminid'],
data() {
return{
chat: ''
}
},
methods: {
sendChat: function(e) {
if(this.chat != ''){
var data = {
chat: this.chat,
admin_id: this.adminid,
user_id: this.userid
}
this.chat = '';
axios.post('/chat/sendChat', data).then((response) => {
this.chats.push(data)
})
this.scrollToEnd();
}
},
scrollToEnd: function() {
var container = this.$el.querySelector("#myDiv");
container.scrollTop = container.scrollHeight;
}
}
}
</script>
I am passing a div id from the Chat.vue file to the ChatComposer.vue file.
As you can see in the ChatComposer.vue file there is a function called scrollToEnd where in it gets the height of the div id from Chat.vue file.
When the sendchat function is triggered i called the scrollToEnd function.
I guess hes not getting the value from the div id because I am getting an error - Cannot read property 'scrollHeight' of null.
Any help would be appreciated.
Thanks in advance.
the scope of this.$el.querySelector will be limited to only ChatComposer.vue hence child component can not able to access div of parent component #myDiv .
You can trigger event as below in ChatComposer
this.$emit('scroll');
In parent component write ScollToEnd method and use $ref to assign new height
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid" #scroll="ScollToEnd"></chat-composer>
..
I have controller as follows:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.questionTypes = [
{display: 'Text', 'name': 'text'},
{display: 'Paragraph', 'name': 'textarea'},
{display: 'Multiple Choice', 'name': 'radio'},
];
$scope.top = {
heading: '',
questions: [
{
tite: 'title 1',
choices: ['']
}
]
};
});
And an HTML body as follows:
<body ng-controller="MainCtrl">
<input ng-model="top.heading" placeholder="heading"/>
<br/>
<div ng-repeat="question in top.questions track by $index">
<select ng-model="question.type" ng-options="c.name as c.display for c in questionTypes"></select>
<div ng-if="question.type == 'radio'">
<div ng-repeat="option in question.choices track by $index">
<input type="text" ng-model="option"/>
<button ng-click="question.choices.push('')" ng-disabled="$index < question.choices.length - 1">Add</button>
<button ng-click="question.choices.splice($index, 1)" ng-disabled="question.choices.length == 1">Del</button>
</div>
</div>
</div>
<pre>{{top | json}}</pre>
</body>
When the user makes the Multiple Choice selection, I want to show a fragment that provides the ability to add various choices. The choices are displayed in repeater.
That all works, but data binding on nested repeater is not working. I assuming this has something to do with scoping, but I can't figure it out.
Any help would be appreciated.
I have created a plunkr at http://plnkr.co/edit/6FxY44HgddRjrLOHlQGF
After fumbling around with this for a while, this is what I did to fix the problem.
I changed:
<input type="text" ng-model="option"/> //after changing model to ng-model
To
<input type="text" ng-model="question.choices[$index]"/>
This allowed the input to reference the parent question object and the choices array on the object instead of referencing the option reference within ng-repeat.
Lets say I have the following HTML:
<div class="some-class">
<p> some paragraph</p>
<h2>a heading</h2>
</div>
I want to grab everything in <div class='some-class'>, including the HTML. The following only grabs the text:
$descriptions = $xpath->query("//div[contains(#class, 'some-class')]");
foreach($descriptions as $description)
print $description->textContent;
Whats the best way of getting the contained HTML tags as well?
Use this function - I've never found any built in function but this works well:
function getInnerHTML($node)
{
$innerHTML = "";
$children = $node->childNodes;
foreach ($children as $child) {
$tmp_doc = new DOMDocument();
$tmp_doc->appendChild($tmp_doc->importNode($child,true));
$innerHTML .= $tmp_doc->saveHTML();
}
return $innerHTML;
}
I believe you are looking to retrieve the outerXml - have a look at DOMDocument::saveXML. Or have I misunderstood you - do you just need the xml serialization of the <div> element and its attribute axis?
Edit I mean do you want:
<div class="some-class">
<p> some paragraph</p>
<h2>a heading</h2>
</div>
or just
<div class="some-class" />
?