jQuery ਦ੍ਰਿਸ਼ਟੀਕੋਣ - closest() ਮੱਥਦਾ ਸੀ
ਉਦਾਹਰਣ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, closest() ਰਾਹੀਂ ਇਵੈਂਟ ਡਿਜਾਇਰੀ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਨਜ਼ਦੀਕੀ ਲਿਸਟ ਟੈਗ ਜਾਂ ਉਸ ਦੇ ਸਬ-ਸਮੂਹ ਵਿੱਚੋਂ ਕੋਈ ਟੈਗ ਕਿਸੇ ਰਾਹੀਂ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੈਲ ਹਰੇ ਰੰਗ ਦਾ ਪੱਟੇ ਲਗਾਇਆ ਜਾਂਦਾ ਹੈ:
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
closest() ਮੱਥਦਾ ਸੀ ਮੇਲ ਚੋਣਕਰਤਾ ਦਾ ਪਹਿਲਾ ਪ੍ਰਾਤਿਨਿਧੀ ਟੈਗ, ਜਿਸ ਤੋਂ ਮੌਜੂਦਾ ਟੈਗ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਡੋਮ ਟ੍ਰੀ ਵਿੱਚੋਂ ਉੱਪਰ ਚੱਲਦਾ ਹੈ。
ਸਿਧਾਂਤ
.closest(selector)
| ਪੈਰਾਮੀਟਰ | ਵਰਣਨ |
|---|---|
| selector | ਸਟਰਿੰਗ ਵਿਲੂਏ, ਜਿਸ ਵਿੱਚ ਮੇਲ ਟੈਗ ਦਾ ਚੋਣਕਰਤਾ ਇਕਸਾਸ਼ਟਰੀਕਸ ਹੈ。 |
ਵਿਸਤ੍ਰਿਤ ਵਿਸ਼ਲੇਸ਼ਣ
ਜੇਕਿਉਏਨ ਜੈਵਨਿਕ ਟੈਗ ਸਮੂਹ ਦਾ ਪ੍ਰਤੀਕ ਮਿਲਦਾ ਹੈ, .closest() ਮੱਥਦਾ ਸੀ ਕਿ ਅਸੀਂ ਇਨ੍ਹਾਂ ਟੈਗਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਪ੍ਰਾਤਿਨਿਧੀਆਂ ਨੂੰ ਜੈਵਨਿਕ ਟ੍ਰੀ ਵਿੱਚੋਂ ਤਲਾਸ਼ ਸਕਦੇ ਹਾਂ, ਅਤੇ ਮੇਲ ਟੈਗ ਦੇ ਅਧਾਰ 'ਤੇ ਨਵਾਂ ਜੈਵਨਿਕ ਟੈਗ ਸਮੂਹ ਬਣਾ ਸਕਦੇ ਹਾਂ。.parents() .closest() ਮੱਥਦਾ ਸੀ, ਉਹ ਵੀ ਇਕੱਠੇ ਹੀ ਡੋਮ ਟ੍ਰੀ ਵਿੱਚੋਂ ਉੱਪਰ ਚੱਲਦੇ ਹਨ। ਉਨ੍ਹਾਂ ਦਰਮਿਆਨ ਦੀ ਅੰਤਰਾਂਤਰਾਂ ਛੋਟੀਆਂ ਹੋਣ ਦੇ ਹਨ, ਪਰ ਉਹ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹਨ:
| .closest() | .parents() |
|---|---|
| ਮੌਜੂਦਾ ਟੈਗ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ | ਮਾਤਾ ਟੈਗ ਤੋਂ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ |
| ਡੋਮ ਟ੍ਰੀ ਵਿੱਚੋਂ ਉੱਪਰ ਚੱਲਦੇ ਹੋਏ, ਚੋਣਕਰਤਾ ਦਾ ਪ੍ਰਭਾਵ ਲਗਾਇਆ ਹੋਏ ਮੇਲ ਟੈਗ ਤੱਕ。 | ਡੋਮ ਟ੍ਰੀ ਵਿੱਚੋਂ ਉੱਪਰ ਚੱਲਦੇ ਹੋਏ, ਪੱਤਰ ਦੇ ਮੂਲ ਟੈਗ ਤੱਕ, ਹਰੇਕ ਪ੍ਰਾਤਿਨਿਧੀ ਟੈਗ ਨੂੰ ਇੱਕ ਅਸਥਾਈ ਕਲੈਸ ਵਿੱਚ ਜੋੜਦੇ ਹਾਂ; ਜੇਕਿਉਏਨ ਚੋਣਕਰਤਾ ਦਾ ਪ੍ਰਭਾਵ ਲਗਾਇਆ ਹੋਵੇ, ਤਾਂ ਉਹ ਚੋਣਕਰਤਾ ਦੇ ਅਧਾਰ 'ਤੇ ਇਸ ਕਲੈਸ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ。 |
| ਜੇਕਿਉਏਨ ਬਣਾਏ ਹੋਏ ਜੈਵਨਿਕ ਟੈਗਸ ਦਾ ਰੈਫਰੈਂਸ ਮਿਲਦਾ ਹੈ | ਜੇਕਿਉਏਨ ਬਣਾਏ ਹੋਏ ਜੈਵਨਿਕ ਟੈਗਸ ਦਾ ਰੈਫਰੈਂਸ ਮਿਲਦਾ ਹੈ |
ਕੀਤੇ ਹੇਠਾਂ ਦੇ ਹੀਲਬ੍ਰੇਨ ਸਪੈਸ਼ਲ ਕੈਟੇਗਰੀ ਦੇ ਪੈਰੰਟਸ ਦਾ ਰੈਫਰੈਂਸ ਮਿਲਦਾ ਹੈ
<ul id="one" class="level-1">
- A
- B
- 1
- 2
- 3
- C
例子 1
假设我们执行一个从项目 A 开始的对
- 元素的搜索：
$('li.item-a').closest('ul').css('background-color', 'red');
这会改变 level-2
- 的颜色，这是因为当向上遍历 DOM 树时会第一个遇到该元素。
- 元素：
$('li.item-a').closest('li').css('background-color', 'red');这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前，.closest() 方法会从 li 元素本身开始搜索，直到选择器匹配项目 A 为止。
ਉਦਾਹਰਣ 3
ਅਸੀਂ DOM ਐਲੀਮੈਂਟ ਨੂੰ ਕਿਸੇ ਕੰਟੈਕਸਟ ਵਿੱਚ ਪਾ ਸਕਦੇ ਹਾਂ ਜਿਥੇ ਉਸ ਵਿੱਚ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਐਲੀਮੈਂਟ ਲੱਭਣ ਲਈ ਖੋਜ ਕਰਦੇ ਹਾਂ。
var listItemII = document.getElementById('ii'); $('li.item-a').closest('ul', listItemII).css('background-color', 'red'); $('li.item-a').closest('#one', listItemII).css('background-color', 'green');ਇਹ ਕੋਡ level-2 <ul> ਦਾ ਰੰਗ ਬਦਲੇਗਾ ਕਿਉਂਕਿ ਇਹ ਲਿਸਟ ਆਈਟਮ ਏ ਦਾ ਪਹਿਲਾ <ul> ਪ੍ਰਾਤਿਸ਼ਠਾ ਹੈ ਅਤੇ ਲਿਸਟ ਆਈਟਮ ਆਈ ਦਾ ਵੰਸ਼ਜ ਹੈ। ਇਹ level-1 <ul> ਦਾ ਰੰਗ ਬਦਲੇਗਾ ਨਹੀਂ ਕਿਉਂਕਿ ਇਹ list item II ਦਾ ਵੰਸ਼ਜ ਨਹੀਂ ਹੈ。
例子 2
假设我们搜索的是
