#jquery #if-statement #hyperlink #contains
Вопрос:
Я пытаюсь найти все теги «a» на всей странице, поэтому я использую функцию «каждый». И хотел бы иметь способ объединить все условия, содержащие ссылки, в один js, чтобы это не выглядело так грязно. Но я думаю, что я не могу использовать «a[href*=»что-то»]» в операторе if? Если нет, то что это будет? Я попробовал «indexOf», но продолжаю выдавать мне ошибку, поэтому внутри каждого из них нельзя использовать «индекс»?
$('a').each(function() {
if ($('a[href*="typeone"]')) {
var linktitle = $(this).attr('title');
$(this).attr('title', 'Typeone: ' linktitle);
} else if ($('a[href*="typetwo"]')) {
var linktitle = $(this).attr('title');
$(this).attr('title', 'Typetwo: ' linktitle);
} else if ($('a[href*="typethree"]')) {
var linktitle = $(this).attr('title');
$(this).attr('title', 'Typethree: ' linktitle);
} else {
var linktitle = $(this).attr('title');
$(this).attr('title', 'Other: ' linktitle);
}
});
<a href="https://typeone/something.html" title="the page name" target="_blank">this is the type one link</a>
<a href="https://typetwo/something.html" title="the page name" target="_blank">this is the type two link</a>
<a href="https://typethree/something.html" title="the page name" target="_blank">this is the type three link</a>
<a href="https://other/something.html" title="the page name" target="_blank">this is the other link</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Комментарии:
1. Ваши if
()
недействительны, так$(selector)
как всегда возвращает объект, который является правдивым. Кроме того, вы не сравниваетесь с текущим<a>
в цикле. Можете ли вы предоставить некоторые примеры html-кода вместе с лучшим объяснением требований?2. Привет, я добавил в него html, надеюсь, это более понятно
Ответ №1:
Вы можете использовать $(this).attr("href").indexOf..
, чтобы проверить, есть ли href
у somevalue
вас или нет, в зависимости от этого, измените свой title
атрибут.
Демонстрационный код :
//target only a tag where href present.
$('a[href]').each(function() {
var linktitle = $(this).attr('title');
//use indexof
if ($(this).attr("href").indexOf("typeone") != -1) {
$(this).attr('title', 'Typeone: ' linktitle);
} else if ($(this).attr("href").indexOf("typetwo") != -1) {
$(this).attr('title', 'Typetwo: ' linktitle);
} else if ($(this).attr("href").indexOf("typethree") != -1) {
$(this).attr('title', 'Typethree: ' linktitle);
} else {
$(this).attr('title', 'Other: ' linktitle);
}
});
<a href="https://typeone/something.html" title="the page name" target="_blank">this is the type one link</a>
<a href="https://typetwo/something.html" title="the page name" target="_blank">this is the type two link</a>
<a href="https://typethree/something.html" title="the page name" target="_blank">this is the type three link</a>
<a href="https://other/something.html" title="the page name" target="_blank">this is the other link</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Комментарии:
1. Я пытаюсь использовать индекс раньше, это дает мне следующее: Ошибка типа: не удается получить доступ к свойству «indexOf», $(…).attr(…) не определен
Ответ №2:
Похоже, вы хотите сопоставить имена хостов. Вы можете создать объект для хостов, которым вы хотите сопоставить, и зациклиться на нем внутри attr(function)
const titleMatch = {
typeone: 'Typeone',
typetwo: 'Typetwo',
typethree: 'Typethree'
}
$('a[title]').attr('title', function(i, curr) {
for ([k,v] of Object.entries(titleMatch)) {
if (this.host.includes(k)) {
return v ': ' curr
}
}
return 'Other: ' curr
});
// for demo only, display results
$('a').each((i,el)=> console.log(el.title))
<a href="https://typeone/something.html" title="the page name" target="_blank">this is the type one link</a>
<a href="https://typetwo/something.html" title="the page name" target="_blank">this is the type two link</a>
<a href="https://typethree/something.html" title="the page name" target="_blank">this is the type three link</a>
<a href="https://other/something.html" title="the page name" target="_blank">this is the other link</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>