How can I select the first "shallowest" input?
My current selection will be the div marked "selected".
I won't know how many levels down it will be.
<div class="selected"> <!-- already have this -->
<div class="unknown-number-of-wrapper-panels">
...
<div class="collection">
<div class="child">
<input type="text" value="2" /> <!-- don't want this -->
</div>
</div>
<input type="text" value="2" /> <!-- need this -->
<input type="text" value="2" />
...
</div>
</div>
It seems like find().first() gives me the deepest one.
Edited for clarity. I need to find it based on the fact that it is shallower, not based on other unique attributes.
This might be like a reverse of closest() ?
If I understand your issue, you need to recursively check the child nodes for elements with that class.
function findShallowest( root, sel ) {
var children = root.children();
if( children.length ) {
var matching = children.filter( sel );
if( matching.length ) {
return matching.first();
} else {
return findShallowest( children, sel );
}
} else {
return null;
}
}
var selected = $('.selected');
findShallowest( selected, ':text' );
Example: http://jsfiddle.net/Qf2GM/
EDIT: Had forgotten a return statement, and had an ID selector instead of a class selector for the initial .selected.
Or make it into your own custom plugin:
Example: http://jsfiddle.net/qX94u/
(function($) {
$.fn.findShallowest = function( sel) {
return findShallowest( this, sel );
};
function findShallowest(root, sel) {
var children = root.children();
if (children.length) {
var matching = children.filter(sel);
if (matching.length) {
return matching.first();
} else {
return findShallowest(children, sel);
}
} else {
return $();
}
}
})(jQuery);
var result = $('.selected').findShallowest( ':text' );
alert( result.val() );
You are after a breadth-first search rather than the depth-first search (which jQuery's find() uses). A quick google has found: http://plugins.jquery.com/project/closestChild
This could be used like this:
$(...).closestChild('input')
Just to golf this "plugin" a bit - Uses #user113716's technique, just reduced code size.
$.fn.findShallowest = function( selector ) {
var children = this.children(),
matching = children.filter( selector );
// return an empty set if there are no more children
if ( !children.length ) {
return children;
}
// if anything matches, return the first.
if ( matching.length ) {
return matching.first();
}
// check grand-children
return children.findShallowest( selector );
};
Try on jsFiddle
This is another approach. The idea is that you get the matching element with the least number of ancestors:
(function($) {
$.fn.nearest = function(selector) {
var $result = $();
this.each(function() {
var min = null,
mins = {};
$(this).find(selector).each(function() {
var n_parents = $(this).parents().length,
if(!mins[n_parents]) {
mins[n_parents] = this;
min = (min === null || n_parents < min) ? n_parents : min;
}
});
$result = $result.add(mins[min]);
});
return $result;
};
}(jQuery));
Usage:
$('selected').nearest('input');
DEMO
findShallowest, as #patrick has it, might be a better method name ;)
If you don't know the class name of the bottom level element you can always use something like
$('.unknown-number-of-wrapper-panels').children().last();
Well given your markup, would the following work?
$('.selected div > input:first')
Related
I'm trying to convert my jquery back to Javascript, but for some reason it states that title is undefined. I'm not sure how to convert it properly or what to do to fix this issue.
Here is the current jquery code
update: function (e) {
var el = e.target;
var $el = $(el);
var val = $el.val().trim();
if (!val) {
this.destroy(e);
return;
}
if ($el.data('abort')) {
$el.data('abort', false);
} else {
this.todos[this.indexFromEl(el)].title = val;
}
this.render();
},
Here is the code from indexFromEl function
indexFromEl: function (el) {
var id = $(el).closest('li').data('id');
var todos = this.todos;
var i = todos.length;
while (i--) {
if (todos[i].id === id) {
return i;
}
}
},
So based off the code above, I tried to convert it myself, but I don't think I did it correctly.
update: function (e) {
var el = e.target;
var val = el.value.trim();
if (!val) {
this.destroy(e);
return;
}
if(val === 'abort') {
return false;
} else {
return this.todos[this.indexFromEl(el)].title = val;
}
this.render();
},
How do I convert the first code block from jquery to javascript? Also, I'm not sure how to edit the first line in the indexFromEl jquery code
Here is the jquery script
<script id="todo-template" type="text/x-handlebars-template">
{{#this}}
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
<div class="view">
<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
<label>{{title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{title}}">
</li>
{{/this}}
</script>
Since the id for each li is being set in the HTML markup, rather than by jQuery:
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
// ^^^^^^^^^^^^^^^^
Once you have a reference to the element in Javascript, all you need to do is retrieve the id property from the dataset, eg:
li.dataset.id
To do that, in your indexFromEl function, use:
const id = el.closest('li').dataset.id;
Or if you like using destructuring to make things a bit more DRY:
const { id } = el.closest('li').dataset;
Also note that it would be much cleaner to use findIndex if you want to find an index in an array:
indexFromEl: function (el) {
const { id } = el.closest('li').dataset;
return this.todos.findIndex(todo => todo.id === id);
}
(though, the above will return -1 if no index is found, rather than undefined, as your current code does, if that's an issue)
In your query version, you didn't return anything. So why returning JavaScript version?
First try to find what is this.todos[this.indexFromEl(el)] using instanceof
If this.todos[this.indexFromEl(el)] is Element then you can set(as you're assigning val) title attribute by setAttribute()
So,
this.todos[this.indexFromEl(el)].setAttribute('title', val);
What exactly is wrong about my try to call closest() on first element selected by querySelectorAll in my custom JavaScript library?
var $ = function(selector){
var x;
var obj = {
myLib(selector){
return x || document.querySelectorAll(selector);
},
cl(selector){
x[0].closest(selector);
return this;
},
style(aaa,bbb){
!aaa && !bbb ? x.getAttribute('style') :
aaa && bbb ? x.forEach( zzz => { zzz.style[aaa]=bbb; } ) :
aaa.includes(';') ? x.forEach( zzz => { zzz.style.cssText+=aaa; } )
: getComputedStyle(x,null)[aaa];
return this;
},
};
x = obj.myLib(selector);
return obj;
};
// now i want to call it
$('div').style('background','#FFFF00');
$('.kilo').cl('.uniform').style('color:','#880088');
<div id="foxtrott">
foxtrott
<div class="uniform">
uniform
<div class="charlie">
charlie
<div class="kilo">
kilo
</div>
</div>
</div>
</div>
When I change my cl() function to this the console tells me: $(...).cl(...) is null
cl(selector){
return x[0].closest(selector);
},
I really don't get it how to do it correctly. :(
You're not setting x in cl.
i.e.
cl(selector) {
x = [x[0].closest(selector)];
return this;
},
Also of note, you'll want to drop the trailing colon on 'border-left:' (EDIT: or 'color:' in your latest edition)
Here's a "working" example
https://repl.it/repls/MixedRipeGlobalarrays
Am struggling hard to bind an array object with list of span values using watcher in Angularjs.
It is partially working, when i input span elements, an array automatically gets created for each span and when I remove any span element -> respective row from the existing array gets deleted and all the other rows gets realigned correctly(without disturbing the value and name).
The problem is when I remove a span element and reenter it using my input text, it is not getting added to my array. So, after removing one span element, and enter any new element - these new values are not getting appended to my array.
DemoCode fiddle link
What am I missing in my code?
How can I get reinserted spans to be appended to the existing array object without disturbing the values of leftover rows (name and values of array)?
Please note that values will get changed any time as per a chart.
This is the code am using:
<script>
function rdCtrl($scope) {
$scope.dataset_v1 = {};
$scope.dataset_wc = {};
$scope.$watch('dataset_wc', function (newVal) {
//alert('columns changed :: ' + JSON.stringify($scope.dataset_wc, null, 2));
$('#status').html(JSON.stringify($scope.dataset_wc));
}, true);
$(function () {
$('#tags input').on('focusout', function () {
var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters
if (txt) {
//alert(txt);
$(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
var div = $("#tags");
var spans = div.find("span");
spans.each(function (i, elem) { // loop over each spans
$scope.dataset_v1["d" + i] = { // add the key for each object results in "d0, d1..n"
id: i, // gives the id as "0,1,2.....n"
name: $(elem).text(), // push the text of the span in the loop
value: 3
}
});
$("#assign").click();
}
this.value = "";
}).on('keyup', function (e) {
// if: comma,enter (delimit more keyCodes with | pipe)
if (/(188|13)/.test(e.which)) $(this).focusout();
if ($('#tags span').length == 7) {
document.getElementById('inptags').style.display = 'none';
}
});
$('#tags').on('click', '.tag', function () {
var tagrm = this.innerHTML;
sk1 = $scope.dataset_wc;
removeparent(sk1);
filter($scope.dataset_v1, tagrm, 0);
$(this).remove();
document.getElementById('inptags').style.display = 'block';
$("#assign").click();
});
});
$scope.assign = function () {
$scope.dataset_wc = $scope.dataset_v1;
};
function filter(arr, m, i) {
if (i < arr.length) {
if (arr[i].name === m) {
arr.splice(i, 1);
arr.forEach(function (val, index) {
val.id = index
});
return arr
} else {
return filter(arr, m, i + 1)
}
} else {
return m + " not found in array"
}
}
function removeparent(d1)
{
dataset = d1;
d_sk = [];
Object.keys(dataset).forEach(function (key) {
// Get the value from the object
var value = dataset[key].value;
d_sk.push(dataset[key]);
});
$scope.dataset_v1 = d_sk;
}
}
</script>
Am giving another try, checking my luck on SO... I tried using another object to track the data while appending, but found difficult.
You should be using the scope as a way to bridge the full array and the tags. use ng-repeat to show the tags, and use the input model to push it into the main array that's showing the tags. I got it started for you here: http://jsfiddle.net/d5ah88mh/9/
function rdCtrl($scope){
$scope.dataset = [];
$scope.inputVal = "";
$scope.removeData = function(index){
$scope.dataset.splice(index, 1);
redoIndexes($scope.dataset);
}
$scope.addToData = function(){
$scope.dataset.push(
{"id": $scope.dataset.length+1,
"name": $scope.inputVal,
"value": 3}
);
$scope.inputVal = "";
redoIndexes($scope.dataset);
}
function redoIndexes(dataset){
for(i=0; i<dataset.length; i++){
$scope.dataset[i].id = i;
}
}
}
<div ng-app>
<div ng-controller="rdCtrl">
<div id="tags" style="border:none;width:370px;margin-left:300px;">
<span class="tag" style="padding:10px;background-color:#808080;margin-left:10px;margin-right:10px;" ng-repeat="data in dataset" id="4" ng-click="removeData($index)">{{data.name}}</span>
<div>
<input type="text" style="margin-left:-5px;" id="inptags" value="" placeholder="Add ur 5 main categories (enter ,)" ng-model="inputVal" />
<button type="submit" ng-click="addToData()">Submit</button>
<img src="../../../static/app/img/accept.png" ng-click="assign()" id="assign" style="cursor:pointer;display:none" />
</div>
</div>
<div id="status" style="margin-top:100px;"></div>
</div>
</div>
I have a list with about 10 000 customers on a web page and need to be able to search within this list for matching input. It works with some delay and I'm looking for the ways how to improve performance. Here is simplified example of HTML and JavaScript I use:
<input id="filter" type="text" />
<input id="search" type="button" value="Search" />
<div id="customers">
<div class='customer-wrapper'>
<div class='customer-info'>
...
</div>
</div>
...
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#search").on("click", function() {
var filter = $("#filter").val().trim().toLowerCase();
FilterCustomers(filter);
});
});
function FilterCustomers(filter) {
if (filter == "") {
$(".customer-wrapper").show();
return;
}
$(".customer-info").each(function() {
if ($(this).html().toLowerCase().indexOf(filter) >= 0) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
}
</script>
The problem is that when I click on Search button, there is a quite long delay until I get list with matched results. Are there some better ways to filter list?
1) DOM manipulation is usually slow, especially when you're appending new elements. Put all your html into a variable and append it, that results in one DOM operation and is much faster than do it for each element
function LoadCustomers() {
var count = 10000;
var customerHtml = "";
for (var i = 0; i < count; i++) {
var name = GetRandomName() + " " + GetRandomName();
customerHtml += "<div class='customer-info'>" + name + "</div>";
}
$("#customers").append(customerHtml);
}
2) jQuery.each() is slow, use for loop instead
function FilterCustomers(filter) {
var customers = $('.customer-info').get();
var length = customers.length;
var customer = null;
var i = 0;
var applyFilter = false;
if (filter.length > 0) {
applyFilter = true;
}
for (i; i < length; i++) {
customer = customers[i];
if (applyFilter && customer.innerHTML.toLowerCase().indexOf(filter) < 0) {
$(customer).addClass('hidden');
} else {
$(customer).removeClass('hidden');
}
}
}
Example: http://jsfiddle.net/29ubpjgk/
Thanks to all your answers and comments, I've come at least to solution with satisfied results of performance. I've cleaned up redundant wrappers and made grouped showing/hiding of elements in a list instead of doing separately for each element. Here is how filtering looks now:
function FilterCustomers(filter) {
if (filter == "") {
$(".customer-info").show();
} else {
$(".customer-info").hide();
$(".customer-info").removeClass("visible");
$(".customer-info").each(function() {
if ($(this).html().toLowerCase().indexOf(filter) >= 0) {
$(this).addClass("visible");
}
});
$(".customer-info.visible").show();
}
}
And an test example http://jsfiddle.net/vtds899r/
The problem is that you are iterating the records, and having 10000 it can be very slow, so my suggestion is to change slightly the structure, so you won't have to iterate:
Define all the css features of the list on customer-wrapper
class and make it the parent div of all the list elements.
When your ajax request add an element, create a variable containing the name replacing spaces for underscores, let's call it underscore_name.
Add the name to the list as:
var customerHtml = "<div id='"+underscore_name+'>" + name + "</div>";
Each element of the list will have an unique id that will be "almost" the same as the name, and all the elements of the list will be on the same level under customer-wrapper class.
For the search you can take the user input replace spaces for underscores and put in in a variable, for example searchable_id, and using Jquery:
$('#'+searchable_id).siblings().hide();
siblings will hide the other elements on the same level as searchable_id.
The only problem that it could have is if there is a case of two or more repeated names, because it will try to create two or more divs with the same id.
You can check a simple implementation on http://jsfiddle.net/mqpsppxm/
I have several div's with "project[0-9]" classes:
<div class="project1"></div>
<div class="project2"></div>
<div class="project3"></div>
<div class="project4"></div>
I want to check if the element has a "project[0-9]" class. I have .hasClass("project") but I'm stuck with matching numbers.
Any idea?
You can use the startswith CSS3 selector to get those divs:
$('div[class^="project"]')
To check one particular element, you'd use .is(), not hasClass:
$el.is('[class^="project"]')
For using the exact /project\d/ regex, you can check out jQuery selector regular expressions or use
/(^|\s)project\d(\s|$)/.test($el.attr("class"))
A better approach for your html would be:
I believe these div's share some common properties.
<div class="project type1"></div>
<div class="project type2"></div>
<div class="project type3"></div>
<div class="project type4"></div>
Then you can find them using:
$('.project')
$('div[class*="project"]')
will not fail with something like this:
<div class="some-other-class project1"></div>
$('div[class^="project"]')
will fail with something like this:
<div class="some-other-class project1"></div>
Here is an alternative which extends jQuery:
// Select elements by testing each value of each element's attribute `attr` for `pattern`.
jQuery.fn.hasAttrLike = function(attr, pattern) {
pattern = new RegExp(pattern)
return this.filter(function(idx) {
var elAttr = $(this).attr(attr);
if(!elAttr) return false;
var values = elAttr.split(/\s/);
var hasAttrLike = false;
$.each(values, function(idx, value) {
if(pattern.test(value)) {
hasAttrLike = true;
return false;
}
return true;
});
return hasAttrLike;
});
};
jQuery('div').hasAttrLike('class', 'project[0-9]')
original from sandinmyjoints: https://github.com/sandinmyjoints/jquery-has-attr-like/blob/master/jquery.hasAttrLike.js
(but it had errrors so I fixed it)
You can improve the existing hasClass method:
// This is all that you need:
(orig => {
jQuery.fn.hasClass = function(className) {
return className instanceof RegExp
? this.attr('class') && this.attr('class')
.split(/\s+/)
.findIndex(name => className.test(name)) >= 0
: orig.call(this, className);
}
})(jQuery.fn.hasClass);
// Test the new method:
Boolean.prototype.toString = function(){ this === true ? 'true' : 'false' };
const el = $('#test');
el.append("hasClass('some-name-27822'): " + el.hasClass('some-name-27822'));
el.append("\nhasClass(/some-name-\d+/): " + el.hasClass(/some-name-\d+/));
el.append("\nhasClass('anothercoolclass'): " + el.hasClass('anothercoolclass'));
el.append("\nhasClass(/anothercoolclass/i): " + el.hasClass(/anothercoolclass/i));
el.append("\nhasClass(/^-name-/): " + el.hasClass(/^-name-/));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="test" class="some-name-0 some-name-27822 another-some-name-111 AnotherCoolClass"></pre>
why don't you use for to check numbers
for (var i = 0; i < 10; i++) {
if(....hasClass("project"+i))
{
//do what you need
}
}