Сложный обход Дом с использованием JavaScript

Question

Сложный обход Дом с использованием JavaScript

Код для 01.js:

var childp = document.getElementById('selected-plays').getElementsByTagName('li');
function getElementsRequired(childp) {
var listitem = [];
var i = 0;
for(i = 0 ; i <childp.length; i++){
//   console.log(childp[i].childNodes.length); 
//condition to filter leaf nodes which are 'li'.
if ((childp[i].childNodes.length - 1))

    listitem.push(childp[i]);
}
//Loop for removing li's which are not direct sibling of ul with class="selected-plays"
for(i =0 ; i<listitem.length; i++){
    if(listitem[i].childNodes[1].getElementsByTagName('a').length){
    console.log(listitem[i].childNodes[1].getElementsByTagName('a'));
    listitem.splice(i,1);
  }
}
return listitem;
}

в консоли:

 getElementsRequired(childp);

код для тела 01.html:

<body>
<h2>Selected Shakephere plays</h2>
<ul id="selected-plays">
    <li>Comedies
        <ul>
            <li><a href="/asyoulikeit/">As You Like It</a></li>
            <li>All's Well That Ends Well</li>
            <li>A Midsummer Night's Dream</li>
            <li>Twelfth Night</li>
        </ul>
    </li>
    <li>Tragedies
        <ul>
            <li><a href="hamlet.pdf">Hamlet</a></li>
            <li>Macbeth</li>
            <li>Romeo and Juliet</li>
        </ul>
    </li>
    <li>Histories
        <ul>
            <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
                <ul>
                    <li>Part I</li>
                    <li>Part II</li>
                </ul>
            </li>
            <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
            <li>Richard II</li>
        </ul>
    </li>
</ul>
</body>

Элементы для выбора являются первыми 'li'siblings of class="selected-plays", Проблема в том, что обход dom дает больше блоков элементов, но он должен давать только 3 блока, а именно "Comedies","Tragedies","Histories", Как мне удалить лишний блок элементов, который № 4 и содержит Генри IV?

jsbin для этого здесь: http://jsbin.com/vital/2/edit

0

javascript html dom dom-traversal

Источник

user3690154 06 июл '14 в 15:21

1 ответ

Другие вопросы по тегам javascript html dom dom-traversal

user1854364 06 июл '14 в 16:29 2014-07-06 16:29 · Answer 1 · 2014-07-06 16:29

Вы можете использовать JQuery's $.clone() а также $.remove() чтобы сделать это проще. Clone предоставит вам новый элемент, чтобы вы не уничтожали HTML в своем DOM. Remove затем удалит дочерний UL из вновь клонированного LI.

http://jsbin.com/jeloloto/2/edit

$('button').on('click', function() {
  var $categoryLIs = $("#selected-plays").children("li");
  var categories = getCategories($categoryLIs);
  debugger;
})

var getCategories = function($elements) {
  var categories = new Array();

  $elements.each(function(index) {
    var element = $elements[index];
    var newElement = $.clone(element);
    $(newElement).find('ul').remove();
    categories.push(newElement);
  });

  return categories;
}