আমি jquery ছাড়াই একটি নির্দিষ্ট ট্যাগ নামের সাথে নিকটতম উপাদানটি সন্ধান করার চেষ্টা করছি। আমি যখন কোনটিতে ক্লিক করি তখন আমি সেই টেবিলটির জন্য <th>অ্যাক্সেস পেতে চাই <tbody>। পরামর্শ? আমি অফসেট সম্পর্কে পড়েছি কিন্তু আসলে এটি খুব বেশি বুঝতে পারি নি। আমার কি কেবল ব্যবহার করা উচিত:
ধরুন ইতিমধ্যে ক্লিক করা তম উপাদানটিতে সেট করা আছে
th.offsetParent.getElementsByTagName('tbody')[0]
parentNode: বিকাশকারী.মোজিলা.আর.ইন-
el.closest('tbody')অ-অর্থাৎ ব্রাউজারগুলির জন্য। নীচে আরও বিস্তৃত উত্তর + পলফিল দেখুন।
উত্তর:
পার্টিতে অল্প (খুব) দেরি হলেও তবুও। এটি কৌশলটি করা উচিত :
function closest(el, selector) {
var matchesFn;
// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
if (typeof document.body[fn] == 'function') {
matchesFn = fn;
return true;
}
return false;
})
var parent;
// traverse parents
while (el) {
parent = el.parentElement;
if (parent && parent[matchesFn](selector)) {
return parent;
}
el = parent;
}
return null;
}
eljQuery.closest () এবং এলিমেন্টক্লোজেস্ট () যা করে এমন উপাদানগুলিরও পরীক্ষা করে। for( var parent = el ; parent !== null && !parent[matchesFn](selector) ; parent = el.parentElement ){ el = parent; } return parent;
parentএবং বৈশ্বিক সুযোগ (!)
el.parentNodeবা আইই-তে কোনও এসভিজির ট্র্যাভার করার সময় এটি ভেঙে যাবে।
খুব সহজ:
el.closest('tbody')
আইই ব্যতীত সমস্ত ব্রাউজারে সমর্থিত।
আপডেট : এজ এখন এটি সমর্থন করে।
JQuery প্রয়োজন নেই। আরও বেশি, jQuery এর $(this).closest('tbody')সাথে প্রতিস্থাপন করা $(this.closest('tbody'))কর্মক্ষমতা বাড়িয়ে তুলবে, উল্লেখযোগ্যভাবে যখন উপাদানটি খুঁজে পাওয়া যায় না।
আই-এর জন্য পলিফিল:
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function (selector) {
var el = this;
while (el) {
if (el.matches(selector)) {
return el;
}
el = el.parentElement;
}
};
দ্রষ্টব্য যে returnযখন উপাদানটি পাওয়া যায় নি তখন সেখানে নেই, যখন undefinedনিকটতম উপাদানটি পাওয়া যায় নি তখন কার্যকরভাবে ফিরে আসত।
আরও তথ্যের জন্য দেখুন: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
আপনি এখানে jQuery ছাড়াই ট্যাগ নামে নিকটতম উপাদানটি পান কীভাবে:
function getClosest(el, tag) {
// this is necessary since nodeName is always in upper case
tag = tag.toUpperCase();
do {
if (el.nodeName === tag) {
// tag name is found! let's return it. :)
return el;
}
} while (el = el.parentNode);
// not found :(
return null;
}
getClosest(th, 'tbody');
এটি করার জন্য একটি স্ট্যান্ডার্ডাইজড ফাংশন রয়েছে: এলিমেন্ট.ক্লসোস্ট । আইই 11 ব্যতীত বেশিরভাগ ব্রাউজার এটিকে সমর্থন করে ( caniuse.com দ্বারা বিশদ বিবরণ )। MDN ডক্স একটি polyfill যদি আপনি পুরোনো ব্রাউজারে লক্ষ্য আছে অন্তর্ভুক্ত।
tbodyপ্রদত্ত নিকটতম পিতামাতার সন্ধানের জন্য thআপনি যা করতে পারেন:
th.closest('tbody');
আপনি যদি নিজে ফাংশনটি লিখতে চান - আমি এখানে এলাম:
function findClosestParent (startElement, fn) {
var parent = startElement.parentElement;
if (!parent) return undefined;
return fn(parent) ? parent : findClosestParent(parent, fn);
}
ট্যাগ নামের দ্বারা নিকটতম পিতামাতার সন্ধানের জন্য আপনি এটি ব্যবহার করতে পারেন:
findClosestParent(x, element => return element.tagName === "SECTION");
function closest(el, sel) {
if (el != null)
return el.matches(sel) ? el
: (el.querySelector(sel)
|| closest(el.parentNode, sel));
}
এই সমাধানটি এইচটিএমএল 5 স্পিকারের সাম্প্রতিকতম কয়েকটি বৈশিষ্ট্য ব্যবহার করে এবং এটি পুরানো / বেমানান ব্রাউজারগুলিতে (পড়ুন: ইন্টারনেট এক্সপ্লোরার) ব্যবহার করে একটি পলিফিল লাগবে।
Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector
|| Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector
|| Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);
@ সালমানপিকে উত্তর প্রসারিত করতে
এটি নির্বাচক হিসাবে নোড ব্যবহার করার অনুমতি দেবে, যখন আপনি মাউসওভারের মতো ইভেন্টগুলির সাথে কাজ করছেন তখন দরকারী।
function closest(el, selector) {
if (typeof selector === 'string') {
matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
while (el.parentElement) {
if (el[matches](selector)) {
return el
};
el = el.parentElement;
}
} else {
while (el.parentElement) {
if (el === selector) {
return el
};
el = el.parentElement;
}
}
return null;
}
আমি যে সাধারণ ফাংশনটি ব্যবহার করছি তা এখানে:
function closest(el, selector) {
var matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches');
while (el.parentElement) {
if (el[matches](selector)) return el;
el = el.parentElement;
}
return null;
}
একটি নির্দিষ্ট পূর্বপুরুষের সন্ধানের জন্য আমরা ব্যবহার করতে পারি:
Element.closest();
এই ফাংশনটি একটি সিএসএস নির্বাচক স্ট্রিংকে আর্গুমেন্ট হিসাবে গ্রহণ করে। এরপরে এটি বর্তমান উপাদানটির নিকটতম পূর্বপুরুষকে (বা নিজেই উপাদানটি) ফেরত দেয় যা সিএসএস নির্বাচকের সাথে মেলে যা আর্গুমেন্টে পাস হয়েছিল। পূর্বপুরুষ না থাকলে এটি ফিরে আসবে null।
const child = document.querySelector('.child');
// select the child
console.dir(child.closest('.parent').className);
// check if there is any ancestor called parent<div class="parent">
<div></div>
<div>
<div></div>
<div class="child"></div>
</div>
</div>গাছটিতে একটি ক্লাস, আইডি, ডেটা অ্যাট্রিবিউট, বা ট্যাগ থাকা সবচেয়ে কাছের ডিওএম উপাদান পান। উপাদান নিজেই অন্তর্ভুক্ত। IE6 এ ফিরে সমর্থনযুক্ত।
var getClosest = function (elem, selector) {
var firstChar = selector.charAt(0);
// Get closest match
for ( ; elem && elem !== document; elem = elem.parentNode ) {
// If selector is a class
if ( firstChar === '.' ) {
if ( elem.classList.contains( selector.substr(1) ) ) {
return elem;
}
}
// If selector is an ID
if ( firstChar === '#' ) {
if ( elem.id === selector.substr(1) ) {
return elem;
}
}
// If selector is a data attribute
if ( firstChar === '[' ) {
if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
return elem;
}
}
// If selector is a tag
if ( elem.tagName.toLowerCase() === selector ) {
return elem;
}
}
return false;
};
var elem = document.querySelector('#some-element');
var closest = getClosest(elem, '.some-class');
var closestLink = getClosest(elem, 'a');
var closestExcludingElement = getClosest(elem.parentNode, '.some-class');
firstCharসমস্ত IFঅবস্থার পরিবর্তে কেন একটি স্যুইচ ব্যবহার করবেন না ?
forলুপ ব্যবহার করবেন ?
নিকটতম উপাদানসমূহের চাইল্ডনোডগুলি সন্ধান করুন।
closest:function(el, selector,userMatchFn) {
var matchesFn;
// find vendor prefix
['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
if (typeof document.body[fn] == 'function') {
matchesFn = fn;
return true;
}
return false;
});
function findInChilds(el){
if(!el) return false;
if(el && el[matchesFn] && el[matchesFn](selector)
&& userMatchFn(el) ) return [el];
var resultAsArr=[];
if(el.childNodes && el.childNodes.length){
for(var i=0;i< el.childNodes.length;i++)
{
var child=el.childNodes[i];
var resultForChild=findInChilds(child);
if(resultForChild instanceof Array){
for(var j=0;j<resultForChild.length;j++)
{
resultAsArr.push(resultForChild[j]);
}
}
}
}
return resultAsArr.length?resultAsArr: false;
}
var parent;
if(!userMatchFn || arguments.length==2) userMatchFn=function(){return true;}
while (el) {
parent = el.parentElement;
result=findInChilds(parent);
if (result) return result;
el = parent;
}
return null;
}
এখানে.
function findNearest(el, tag) {
while( el && el.tagName && el.tagName !== tag.toUpperCase()) {
el = el.nextSibling;
} return el;
}
গাছের নীচে কেবল ভাইবোনদেরই খুঁজে পাওয়া যায়। ব্যবহারের previousSibling উভয় উপায় এবং বিনিময়ে যেটা প্রথম পাওয়া যায়, তর্ক করার জন্য অন্য উপায় বা ব্যবহার ভেরিয়েবল যান। আপনি সাধারণ ধারণাটি পান তবে আপনি যদি পিতামাতার নোড বা বাচ্চাদের সাথে যোগাযোগ করতে চান তবে কোনও ভাইবোন যদি মেলে না তবে আপনি ভালভাবে jQuery ব্যবহার করতে পারেন। এই মুহুর্তে এটি সহজেই এটি মূল্যবান।
পার্টিতে কিছুটা দেরি হয়ে গেছে, তবে আমি যখন যাচ্ছিলাম এবং খুব অনুরূপ একটি প্রশ্নের উত্তর দিয়েছিলাম, আমি আমার সমাধানটি এখানে রেখে দিচ্ছি - আমরা বলতে পারি এটি জিকুয়ের closest()পদ্ধতির, তবে সাধারণ জাভাস্ক্রিপ্টের জন্য সহজ।
এটির জন্য কোনও পলিফিলের প্রয়োজন নেই এবং এটির পুরানো ব্রাউজারগুলি এবং আইই (:-)) বন্ধুত্বপূর্ণ: https://stackoverflow.com/a/48726873/2816279
আমি মনে করি নিকটস্থ jquery সঙ্গে ধরা সবচেয়ে সহজ কোড:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".add").on("click", function () {
var v = $(this).closest(".division").find("input[name='roll']").val();
alert(v);
});
});
</script>
<?php
for ($i = 1; $i <= 5; $i++) {
echo'<div class = "division">'
. '<form method="POST" action="">'
. '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
. '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
. '</form></div>';
}
?>
অনেক ধন্যবাদ.