My code like this since I using jquery tree
<ul class="tree">
<li>
<div class="tree-node" node-id="102009002002000000000000" style="cursor: pointer;">
<span class="tree-hit tree-expanded"></span>
<span class="tree-icon tree-folder tree-folder-open"></span>
<span class="tree-checkbox tree-checkbox1"></span>
<span class="tree-title">TEXT-1</span>
</div>
</li>
<li>
<div class="tree-node" node-id="102009002002001000000000" style="cursor: pointer;">
<span class="tree-indent"></span>
<span class="tree-hit tree-expanded"></span>
<span class="tree-icon tree-folder tree-folder-open"></span>
<span class="tree-checkbox tree-checkbox1"></span>
<span class="tree-title">TEXT-2</span>
</div>
<ul style="display: block;">
<li>
<div class="tree-node" node-id="102009002002001001000000" style="cursor: pointer;">
<span class="tree-indent"></span>
<span class="tree-indent"></span>
<span class="tree-hit tree-collapsed"></span>
<span class="tree-icon tree-folder"></span>
<span class="tree-checkbox tree-checkbox1"></span>
<span class="tree-title">CHILD TEXT-2</span>
</div>
</li>
</ul>
</li>
</ul>
Check the class if have tree-checkbox1 = checked, if checked get the node-id parent.
I have tried 2 option.
1 select parent then check if have child tree-checkbox1 if checked then get the node-id
var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-node');
for (var i = 0; i < doc.length; i++) {
for (var x = 0; x < doc[i].length; x++) {
if (doc[i].childNodes[x].className == 'tree-checkbox1') {
kd_org.push(doc[i].getAttribute['node-id']);
}
}
}
second option select all class tree-checkbox1 then get the attribute parent
var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-checkbox1');
for (var i = 0; i < doc.length; i++) {
var value = doc.parentNode.getAttribute['node-id'];
kd_org.push(value);
}
Still no luck :(, i not expert on javascript any help?
Your code has minor changes, below given is the working code that gets the node id
var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-checkbox1');
for (var i = 0; i < doc.length; i++) {
var value = doc[i].parentNode.getAttribute('node-id');
kd_org.push(value);
}
console.log(kd_org);
Couple of points to note
use indexer when you are accessing from the array doc[i]
use the method name with parenthesis instead of square brackets
Not sure what tree-checkbox1 = checked means, but if I understand correctly you are checking if the element has tree-checkbox1 class.
With jquery you can do this to select all the elements with this class, and get the node-id attr from parent
$('.tree-checkbox1').each((index, element) => {
console.log($(element).parent().attr('node-id'));
});
Related
I've just about tried this every possible way, I'm super new at this.
I'm trying to get the element using class name, and then I'm trying to change it's value to true so that I can run a function I made that uses .push and an if/else statement to build a new array based off of the values in the spans (I'll post that function at the bottom)
Any help anyone can provide would be awesome, I've been at this for the last 3 evenings and I'm just stuck and I have to have this solved by tomorrow.. :(
A billion thanks in advance!
JavaScript
// Function Declaration to check the user's character choice.
function userChoiceCheck(uChoice, low) {
for (var j = 0; j < low.length; j++) {
if (uChoice == low[j]) {
var element = document.getElementsByClassName(low[j]);
element.setAttribute = "true";
console.log(element);
console.log("The value of " + low[j] + " should now be true!");
} else {
document.getElementsByClassName(low[j].class).value = "false";
console.log("The value of " + low[j] + " should now be false!");
}
}
}
HTML
<div class="text-center pt-5">
<h1 id="wordGuessArea">
<span class="m" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="s" value="false">__ </span>
<span class="e" value="false">__ </span>
</h1>
</div>
function mentioned above:
// Function Declaration to merge censoredWord Array and upper Array into a
new array called displayArr. Depending on the boolean value of the span that
contains the character.
function mergeArr(low, up, wSplit, cWord) {
for (var m = 0; m < wSplit.length; m++) {
var targetCharSpan = document.getElementsByClassName(low[m]);
var charSpanVal = targetCharSpan.value;
if (charSpanVal == true) {
displayArr.push(up[m]);
} else if (charSpanVal == false) {
displayArr.push(cWord[m]);
}
}
}
I assume that you are having trouble on get all element by class,
if so, you need a loop
getElementsByClassName return a array HTMCollection, instead of using element.setAttribute, you should loop through every element inside your element variable
Like this:
for(let i=0;i<element.length;i++)
{
element[i].setAttribute = "true";
}
You can solve your problem this way using jQuery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="text-center pt-5">
<h1 id="wordGuessArea">
<span class="m" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="s" value="false">__ </span>
<span class="e" value="false">__ </span>
</h1>
</div>
<script>
for(var i=0;i<$('#wordGuessArea span').length;i++){
//Applying for all span elements inside wordGuessArea id
$('#wordGuessArea span').html('Bla');
}
</script>
</body>
In chrome extension,how to manipulate original html content
index.html
<div class='demo'>
<SPAN class ="number">1</SPAN>
<SPAN class ="number">2</SPAN>
<SPAN class ="number">3</SPAN>
<SPAN class ="number">4</SPAN>
</div>
content.js
//some logic to get arrays of text in "number" class from html,then multiply with 2 , then update the index.html
required output (index.html)
<div class='demo'>
<SPAN class ="number">2</SPAN>
<SPAN class ="number">4</SPAN>
<SPAN class ="number">6</SPAN>
<SPAN class ="number">8</SPAN>
</div>
hope this help you
index.html
<div class='demo'>
<span class ="number">1</span>
<span class ="number">2</span>
<span class ="number">3</span>
<span class ="number">4</span>
</div>
<button>d</button>
content.js
$("button").click(function(){
x=document.getElementsByClassName("number"); // Find the elements
for(var i = 0; i < x.length; i++){
var y = parseInt(x[i].innerText) * 2;
x[i].innerText= y; // Change the content
}
});
This will give you desired output,
Try this simple jquery code.
var c = 2;
$(".demo .number").each(function(){
$(this).html(c);
c += 2;
});
I am using below code for slide toggle, it
<div ng-repeat="item in $ctrl.searchitems track by $index">
<div class="quickinfo-overlap"> Content here...
<a class="btn-link" ng-click="$ctrl.quickinfoToggle(item)">quick info</a>
</div>
</div>
And I am using ng-repeat, so it is showing list, I want others list should be close or quickinfo false. so can I do?
This is the controller code:
function listingController($scope) {
var vm = this;
vm.quickinfo = false;
vm.quickinfoToggle = function(event) {
event.quickinfo = !event.quickinfo;
};
};
HTML:
<div ng-repeat="item in $ctrl.searchitems track by $index">
<div class="quickinfo-overlap"> Content here...
<a class="btn-link" ng-click="$ctrl.quickinfoToggle(item,$index)">quick info</a>
</div>
<div>
DIV that needs to be toggled on click
</div>
</div>
Javascript:
function listingController($scope) {
var vm = this;
$scope.toggleList = [];
for(var i=0;i< $scope.searchitems.length;i++)
$scope.toggleList[i] = false;
vm.quickinfoToggle = function(event,index) {
for(var i=0;i< $scope.toggleList.length;i++)
$scope.toggleList[i] = false;
$scope.toggleList[index] = true
event.quickinfo = !event.quickinfo;
};
};
while looping with ng-repeat to show the items, set ng-show:
<div class="quickinfo slide-toggle" ng-show="quickinfo == 1" ng-cloak>
Content here ....
</div>
<a class="btn-link" ng-click="quickinfo = 1">quick info</a>
Of course 1 is not fixed number, it should be unique to each item, like the index or id of the item.
The idea is when clicking the quickinfo link you assigned the clicked item's id not assign true\false to the quickinfo, and in ng-show check if the current id assigned to quickinfo is the same as this item id (or index).
Of course variable names can be changed.
I have a question about popping selection from dropdown off the menu. I have a dropdown that gets dynamically populated with people's names, and I'd like the name selected to pop off the drop down menu and appear in a div next to it. The dropdown menu:
<div class="col-md-4">
<div class="dropdown">
<button style="width: 100%;" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Group Members
<span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu" role="menu">
{{#each users}}
<li data-uid={{this.u_id}}>{{this.full_name}}</li>
{{/each}}
</ul>
</div>
</div>
And the div I'd like the information (name) to appear:
<div class="col-lg-4">
<h2 class="text-center" style="margin-top: 0;">Selected Group Members</h2>
<ul class="list-unstyled">
<li data-uid={{this.u_id}} class="text-center">{{this.full_name}}</li>
</ul>
</div>
I'm imagining this can be done with some jQuery, which I'm unfortunately not too great at, so I'm not quite sure how to do this. Any help is appreciated!
This should does the work. Please check.
// selected element
var selections = [];
// container that holds selections
var listContainer = $('.container .list-unstyled');
// sorting array of objects by provided field
var sortBy = function (arr, field) {
return arr.sort(function (a, b) {
if (a[field].toLowerCase() < b[field].toLowerCase()) return -1;
if (a[field].toLowerCase() > b[field].toLowerCase()) return 1;
return 0;
});
};
// redraw list on container
var reorder = function(){
listContainer.html('');
for(var i = 0; i < selections.length; i++){
listContainer.append('<li data-uid=' + selections.id + '>' + selections.value + '</li>');
}
}
// list items click handler
$('ul.list-unstyled li').click(function(){
selections.push({
id: $(this).attr('data-uid'),
value: $(this).text()
});
selections = sortBy(selections, 'name');
});
I have this array of objects that I need to work with:
$scope.pdfs = [
{ "pdf_title": "Corporate Hire", "attached_file": "http://file1.jpg"},
{ "pdf_title": "Wedding Hire", "attached_file": "http://file2.jpg"},
{ "pdf_title": "Filming Hire", "attached_file": "http://file3.jpg"}
];
The pdf_file value is ng-repeated in li's.
What I want to do is if that li is clicked, to push its paired to another div, say the src for an href.
Here are my workings, but not quite correct:
Controller function:
$scope.bindWithFile = function(value) {
var currentValue = $scope.corpResult = value;
// pdfs support
var pdfs = $scope.pdfs;
for (var i = pdfs.length - 1; i >= 0; i--) {
if (currentValue == hasOwnProperty(key[pdfs])) {
value[pdfs] = $scope.corpLinkHref;
}
};
Markup:
<div class="w-12" ng-controller="corpHireController">
<div class="c-6-set">
<ul>
<li ng-repeat="pdf in pdfs" class="col-7 link link-inherit" ng-click="bindWithFile(pdf.pdf_title)">{{::pdf.pdf_title}}</li>
</ul>
</div>
<div class="c-6-set">
<div class="w-12">
<i class="fs-4 col-7 icon icon-pdf"></i>
</div>
<span class="col-7 h4" ng-bind="corpResult"></span>
<button ng-href="{{::corpLinkHref}}" class="button green2-button smaller-letters full-width">Download</button>
</div>
</div>
What is needed:
Clicking on the titles on the left, binds the pdf_title under the pdf icon and binds the attached_file to the button's href
Instead of passing the title of the selected pdf, why not passing the whole object. This way you don't have to performance any find or search function.
Markup:
<div class="w-12" ng-controller="corpHireController">
<div class="c-6-set">
<ul>
<li ng-repeat="pdf in pdfs" class="col-7 link link-inherit"
ng-click="bindWithFile(pdf)">
{{::pdf.pdf_title}}
</li>
</ul>
</div>
<div class="c-6-set">
<div class="w-12">
<i class="fs-4 col-7 icon icon-pdf"></i>
</div>
<span class="col-7 h4" ng-bind="corpResult"></span>
<button ng-href="{{::corpLinkHref}}"
class="button green2-button smaller-letters full-width">
Download
</button>
</div>
</div>
Controller
$scope.bindWithFile = function(selectedPdf) {
$scope.corpResult = selectedPdf.pdf_title;
$scope.corpLinkHref = selectedPdf.attached_file;
}