텍스트로 링크 선택 (정확히 일치)
jQuery를 사용하여 정확히 어떤 종류의 텍스트가 포함 된 링크를 선택하고 싶습니다. 예를 들면 :
<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>
나는 이것을 시도했다 :
$('a:contains("This One")')
그러나 첫 번째와 두 번째 링크를 선택합니다. 정확히 "This One"을 포함하는 첫 번째 링크를 원합니다. 어떻게 할 수 있습니까?
다음과 같이 할 수 있습니다.
$('a').filter(function(index) { return $(this).text() === "This One"; });
참조 : http://api.jquery.com/filter/
내 동료가 다음을 수행하는 기능으로 jQuery를 확장했습니다.
$.expr[':'].textEquals = function(a, i, m) {
return $(a).text().match("^" + m[3] + "$");
};
그 결과 다음과 같이 정확한 텍스트로 무언가를 선택할 수 있습니다.
$("label:textEquals('Exact Text to Match')");
매번 정확한 구문을 기억할 필요가 없기 때문에 이렇게하면 쉽습니다. 그의 전체 게시물은 다음과 같습니다. 정확한 텍스트로 요소를 선택하는 jQuery Custom Selector : textEquals
FishBasketGordo의 답변을 확장하려면. 많은 양의 요소를 선택하려는 경우 :contains()
먼저를 사용 하여 범위를 좁힌 다음 필터를 적용하십시오.
이렇게하면 전반적인 속도가 향상됩니다.
$('a:contains("This One")').filter(function(index)
{
return $(this).text() === "This One";
});
Nariman의 솔루션을 다음과 같이 수정해야했습니다.
$.expr[':'].textEquals = function(a, i, m) {
var match = $(a).text().match("^" + m[3] + "$")
return match && match.length > 0;
}
그렇지 않으면 크롬 (Linux)에서 작동하지 않았습니다.
나는 확장을 사용하고 있었다
$.expr[':'].textEquals
그러나 구현이 더 이상 jQuery 1.7에서 작동하지 않는다는 것을 발견했습니다 (분명히 Sizzla.filter의 변경 사항). 그것을 작동시키기 위해 얼마 동안 고군분투 한 후에 나는 단순히 jQuery 플러그인을 작성하여 동일한 작업을 수행했습니다.
$.fn.textEquals = function (text) {
var match = false;
$(this).each(function () {
if ($(this).text().match("^" + escapeRegex(text) + "$")) {
match = true;
return false;
}
});
return match;
};
사용하다:
$(".ui-autocomplete li").textEquals('Exact Text to Match');
다른 사람이이 (,
드롭 드원에서 선택한 값을 가져 오는 방법 :
$.fn.textEquals = function (text) {
var match = false;
var values="";
$(this).each(function () {
if ($(this).text().match("^" + text + "$")) {
values=$(this).val();
match = true;
return false;
}
});
return values;
};
console.log($("option").textEquals("Option One"));
-드롭 다운 값을 반환합니다.
So Narnian's answer works pretty well. Using it in the wild, however, I ran into some issues, where things that I would have expected to get found were not getting found. This was because sometimes there is random white space surrounding the element's text. It is my belief that if you're searching for "Hello World", you would still want it to match " Hello World ", or even "Hello World \n". Thus, I just added the "trim()" method to the function, which removes surrounding whitespace, and it started to work better. Also, I modified the variable names to be a little clearer to my mind.
Specifically...
$.expr[':'].textEquals = function(el, i, m) {
var searchText = m[3];
var match = $(el).text().trim().match("^" + searchText + "$")
return match && match.length > 0;
}
And secondary note... trim only removes whitespace before and after the searched text. It does not remove whitespace in the middle of the words. I believe this is desirable behavior, but you could change that if you wanted.
$('a:contains("This One")')[0];
I feel like I'm missing something based on everyone else's answer to filter but why not just select the first item within the array of elements that's returned by 'contains'?
This works, only if you know that the first link has the exact match you're looking for. Other answers work better, if you're not sure which order the links will be in.
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
$(link).hide();
$(link).removeAttr('href');
Sorry, if this exactly matches anybody's answer above,
$.fn.equalsText = function (text, isCaseSensitive) {
return $(this).filter(function () {
if (isCaseSensitive) {
return $(this).text() === text
} else {
return $(this).text().toLowerCase() === text.toLowerCase()
}
})
}
Here is some output in the Linkedin search result page console.
$("li").equalsText("Next >", false)
[<li class="next">…</li>] // Output
$("li").equalsText("next >", false)
[<li class="next">…</li>] // Output
$("li").equalsText("Next >", true)
[<li class="next">…</li>] // Output
$("li").equalsText("next >", true)
[] // Output
It has case sensitivity support as well and is not using :contains()
Edit (May 22, 2017) :-
$.fn.equalsText = function (textOrRegex, isCaseSensitive) {
return $(this).filter(function () {
var val = $(this).text() || this.nodeValue
if (textOrRegex instanceof RegExp) {
return textOrRegex.test(val)
} else if (isCaseSensitive) {
return val === textOrRegex
} else {
return val.toLowerCase() === textOrRegex.toLowerCase()
}
})
}
참고URL : https://stackoverflow.com/questions/6673777/select-link-by-text-exact-match
'code' 카테고리의 다른 글
이미지 크로스 브라우저의 원래 크기를 결정 하시겠습니까? (0) | 2020.09.11 |
---|---|
R에서 여러 줄 주석을 가질 수 있습니까? (0) | 2020.09.11 |
웹 페이지의 "오버 스크롤"방지 (0) | 2020.09.11 |
ID 열 키 생성을 사용할 수 없습니다. (0) | 2020.09.11 |
예외 처리가 나쁜 이유는 무엇입니까? (0) | 2020.09.11 |