Нужна помощь с условием jQuery, которое удаляет элемент контейнера на основе совпадающего текста

#javascript #jquery

Вопрос:

вот моя разметка:

   <div>
        <h3>Title</h3>
        <ul class="eventslist">
            <li>This event would be discarded</li>
                <ul>
                    <li>...</li>
                    <li>...</li>
                </ul>
            </li>
        </ul>
    </div>

    <div>
        <h3>Title</h3>
        <ul class="eventslist">
            <li>Earnings - This event would be included</li>
                <ul>
                    <li>...</li>
                    <li>...</li>
                </ul>
            </li>
        </ul>
    </div>

Мне нужна помощь в написании условия, которое проходило бы через каждый UL class =»eventslist» на странице и проверяло, что первый элемент LI в UL class =»eventslist» содержит слово «Доход» (оно может быть где угодно в тексте, и капитализацию следует игнорировать). Если этого не произойдет, весь DIV, обернутый вокруг UL, должен быть удален вместе со всем, что внутри него.

Любая помощь приветствуется!

1. Возможно ли предоставить тем, у кого есть доход, определенный идентификатор? это сделает это намного проще… Поскольку вы генерируете это с помощью серверного скрипта, заставьте серверный код проверить, работает ли it.StartsWith(«Заработает»), а затем добавьте идентификатор в тег li

2. Нет, к сожалению, у меня нет контроля над разметкой — я должен был указать это.

Ответ №1:

Этот jQuery будет делать то, что вы хотите:

 $(document).ready(function(){

    $(".eventslist").filter(function(){
        var text = $(this).children("li:first").text();
        return !/earnings/i.test( text );  
    }).closest("div").remove();
});

Пример jsFiddle:http://jsfiddle.net/dGKMj/2 /

Ответ №2:

 $('ul.eventslist').filter(function () {
    return !$(this).find('li:first').text().match(/earnings/i);
}).parent().remove();

Демонстрация jsFiddle

Объяснение:

Выполняется .filter() в .eventslist списках и сохраняет только те, которых нет eanings где-то в первом li .
Удаляет родительский элемент (в основном div ) этих списков. Вместо parent() вы также можете использовать closest('div') , если разметка может измениться. Наиболее пуленепробиваемым было бы присвоить класс родительскому div , а затем использовать closest('div.container') .

Ответ №3:

Хотя приведенные выше ответы работают, я предпочитаю простоту селекторов jQuery.

 $('ul.eventslist > li:first-child').not(":contains('Earnings'), :contains('earnings')").closest('div').remove();

Я думаю, что это намного проще прочитать и обновить позже. <— Это мое мнение

http://jsfiddle.net/natedavisolds/QFbD2/3/

1. Необходимость указывать две версии Earnings не заставляет меня говорить: «Хм, как легко это обновить позже!» Я также не уверен, сработает ли это.

2. Проблема с этим заключается в том, что если в .eventslist списке будет более одного элемента списка, код перестанет работать: jsfiddle.net/bazmegakapa/8Wx7x .

3. @bazmegakapa — Хотелось бы, чтобы он не учитывал регистр или чтобы я тоже мог использовать какое-нибудь регулярное выражение. Но я не рассматриваю это как большой шаг назад. Очень ясно, что делают селекторы, и это плюс. Кроме того, две версии ‘Earnings’ — это именно то, что он указал.

4. @natedavisolds Если вы добавите другой li (я добавил один ко второму ul ), он удалит div , даже если этого не должно быть. О ваших селекторах: они работают нормально, только не говорите, что они более удобны в обслуживании. Для меня, например, синтаксис filter очень интуитивно понятен.

5. @bazmegakapa — ах да. Я обновил селектор, чтобы проверять только первого дочернего элемента.