Как получить текстовое содержимое уровня один div, когда внутри есть другой div?

Question

$(document).on('click', '#summary [class^=lv]', function (e) { 
 
    $selected = $(this); 
 
    console.log($selected); 
 
    var x = $(this).toggleClass('clicked'); 
 
    $("[class^=lv]").not(x).removeClass("clicked child").addClass("child"); 
 
    e.stopPropagation(); 
 

 
    alert($selected.text()); 
 
    
 
});

.clicked{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="summary"> 
 
    <div class="lv1"> 
 
    LV1. Title1 
 
    <div class="lv2">LV2. Title2</div> 
 
    </div> 
 
</div>

Теперь я использую метод .text(), чтобы получить содержимое сНа элемента. Однако, когда я пытаюсь получить содержимое div первого уровня, он возвращается со вторым уровнем контента.

Как получить только каждый контент div при нажатии на каждый элемент div?

Answer 1

В ванили JavaScript вы можете перебираем ChildNodes ищет #text узлы (node.nodeType === 3), а затем объединить их данные

function immediateText(parent) { 
    var i, t = ''; 
    for (i = 0; i < parent.childNodes.length; ++i) 
     if (parent.childNodes[i].nodeType === 3) 
      t += parent.childNodes[i].data; 
    return t; 
} 

DEMO

Answer 2

Вы можете получить его изготовление клона и удаление всех div с

var lev1=$(".lv1").clone() 
 
lev1.children('div').remove(); 
 
alert (lev1.html());

.clicked{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="summary"> 
 
    <div class="lv1"> 
 
    LV1. Title1 
 
    <div class="lv2">LV2. Title2</div> 
 
    </div> 
 
</div>

Answer 3

Альтернативный метод - если вы просто хотите, чтобы увидеть текст щелкнули DIV:

if($selected.children('div').length) { 

     text=$selected.text().replace($selected.children('div').text(),''); 
} 

    else { 
     text=$selected.text(); 
    } 
    alert(text); 

Jsfiddle: http://jsfiddle.net/cxpq0cjy/1/