Блог

Главная - Вопросы по программированию - jQuery уничтожает ссылку, если у li есть дочерние элементы

jQuery уничтожает ссылку, если у li есть дочерние элементы

#jquery

#jquery

Вопрос:

Учитывая следующую структуру:

 <ul>
    <li><a href="example.com>1</a></li>
    <li><a href="example.com>2</a></li>
    <li><a href="example.com>3</a>
        <ul>
            <li><a href="example.com">3.1</a></li>
            <li><a href="example.com">3.2</a>
                <ul>
                    <li><a href="example.com">3.2.1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="example.com>4</a></li>
</ul>

Я бы хотел автоматически удалить или отключить ссылку для 3 и 3.2

В принципе, любой li, у которого есть дочерние элементы, ссылка должна быть удалена. Каков наилучший способ сделать это?

Ответ №1:

Если вы не хотите сохранять текст:

 $('li:has(ul) > a').remove();

ДЕМОНСТРАЦИЯ

Если вы хотите сохранить текст, вы могли бы использовать .replaceWith :

 $('li:has(ul) > a').replaceWith(function() {
    return $(this).text();
});

ДЕМОНСТРАЦИЯ

Комментарии:

1. Я новичок, что было бы что-то подобное, просто не мог сам до этого додуматься, но что, если он захочет сохранить текст в ссылке?

2. @kylex: Вы могли бы рассмотреть возможность замены его другим элементом DOM вместо только их контекста, чтобы вам было проще снова обернуть их в ссылки. Но это зависит от вашего варианта использования. Пожалуйста 🙂

Ответ №2:

Даже если бы я не тестировал, это должно сработать:

 $('li').filter(function(){ return $('ul', this).length ? this : ''; }).find('a:first').unwrap('<a></a>')

Ответ №3:

 $("a").click(function(e){
    if( $(this).parent().children('ul').length > 0 ){
        e.preventDefault(); //prevent the link from being followed
        $(this).remove(); //remove the a element
    }
});

Ответ №4:

использование jQuery,

 $('li > a').each(function() {
  if ($(this).siblings().length)
    $(this).remove();
});

Ответ №5:

 $('ul li > ul').parent().children("a").attr("href","#")