Блог

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

Удалите первые 2 содержимого , кроме того, что у вас есть внутри тега

#javascript #jquery

#javascript #jquery

Вопрос:

Как мне удалить содержимое первых 2 <li> , кроме того, что у вас есть внутри тега <label> второго <li> .

Моя структура такая:

 <ul>
    <li> 
        Text <label>1#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>2#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>6#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>7#</label> <input type="text" value="" />
    </li>
    
</ul>

И пришлось бы удалить коды и оставаться таким:

 <ul>  
    <li> 
        <label>2#</label> 
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>6#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>7#</label> <input type="text" value="" />
    </li>
    
</ul>

ДЕМОНСТРАЦИОННЫЙ КОД

(Мой английский отстой, я надеюсь, вы поняли мой вопрос, и он был ясен для всех.)

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

1. В вашем примере вы удалили весь первый <li> блок. Это то, что вы хотите?

2. И вы не удалили второй <label> тег, вы сказали, что хотите сохранить только его содержимое?

3. @j08691, @blex Да, удаляет первый блок полностью <li> без исключения, и исключение сохраняется <label> только для второго блока <li> .

Ответ №1:

При этом первый элемент списка удаляется полностью, а затем все узлы, кроме меток, из второго элемента списка.

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

 $('ul li:nth-child(1)').remove();
$('ul li:nth-child(1)').contents().filter(function(){
    return !$(this).is('label');
}).remove();

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

1. И в случае, если у меня есть 2 <ul> и я должен сделать это только сначала?

2. @user3743128 $('ul:eq(0) li:nth-child(1)')

3. @user3743128 Да, если вы хотите применить только к первому ul, добавьте фильтр. В противном случае это будет применяться ко всем. Посмотрите на эту скрипку jsfiddle.net/Aq8BL

4. 1 за то, что я единственный человек, который понял проблему, из всех людей, которые ответили.

5. Что не так с: $(‘ul li:nth-child(1) input’).remove(); ?

Ответ №2:

Это может быть вашим решением:

 $('ul li label').each(function() {
    $(this).parent().empty().append($(this));
});

Скрипка:http://jsfiddle.net/FGJLg/

Ответ №3:

Вот такая возможность (здесь просто краткий урок по jQuery, но я бы выбрал 3-й вариант, см. Ниже) :

 $('ul li:nth-child(1)').remove();
$('ul li:nth-child(1)').remove(); // child(1) ALSO, BECAUSE #2 HAS NOW BECOME #1 !

// OR MODULAR :
for (i=1; i < 3; i  )
{
    $('ul li:nth-child(' i ')').remove(); // OBVIOUSLY #3 AND #4 ARE REMOVED AS WELL.
}

// YOU CAN CAPTURE AND STORE THE LABEL CONTENT, ERASE THE CONTENT OF THE LI, AND PUT BACK THE LABEL :

for (i=1; i < 3; i  )
{
    var label_content = $('ul li:nth-child(' i ') label').html(); // GETTER
    $('ul li:nth-child(' i ')').html(''); // SETTER (set to empty)
    $('ul li:nth-child(' i ')').html('<label>' label_content '</label>'); // REINJECT THE LABEL
}

Рабочая скрипка здесь: http://jsfiddle.net/U5K5q/1 /

Но похоже, что вы просто хотите «скрыть» (отобразить: нет) свои входные данные… Если это так, то вы с тем же успехом можете сделать :

 for (i=1; i < 3; i  )
{
    $('ul li:nth-child(' i ') input').css('display':'none');
    $('ul li:nth-child(' i ') input').attr('disabled'); // JUST TO MAKE SURE THIS INPUT IS NOT GOING SUBMITTED
}

Или, 3-й вариант, очиститель :

 for (i=1; i < 3; i  )
{
    $('ul li:nth-child(' i ') input').remove(); // OBVIOUSLY #3 AND #4 ARE REMOVED AS WELL.
}
Метки: , ,