Get html in ul outside li

Question

I have the following code :

<ul id="rubrique_1" class="questionZone ui-sortable">
Rubrique par défaut
<li id="question_1" class="questionStyle">(Q) Matrice case a coché</li></ul>

How can I get the HTML "Rubrique par défaut" without all the HTML of the li div with jQuery? I don't want to put div for the text because I'm using sortable function on ul rubrique_1.

$('#rubrique_1").text()

gives me all the HTML.

Your html is invalid, the [allowed content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) for a `ul` is basically just `li` (and a couple of other edge cases) It can't contain text outside of an `li`. Also, your jQuery has two different types of quotation marks wrapping the selector, so it won't run. — DBS, Sep 15 '20 at 12:49
If you can change the html move `Rubrique par défaut` in the
Does this answer your question? [How do I select text nodes with jQuery?](https://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — Mark Baijens, Sep 15 '20 at 13:01

score 0 · Answer 1 · answered Sep 15 '20 at 12:54

0

"give me all the html" -> $("#rubrique_1").html()

If you mean what I think you mean, you need:

$("#rubrique_1").contents().filter(function() { return this.nodeType === 3; }).text();

Hope this helps, but be sure to read DBS' comment

answered Sep 15 '20 at 12:54

Koen

461
2
5
16

score -1 · Answer 2 · answered Sep 15 '20 at 13:08

Not direct but a little tricky solution. Pick the node with ID, With that selector, parse through all the child nodes inside that. Inside that list, check for nodes that are not li and have a valid text content (I have used trim function to check the content length).

function decode () {
  let text = '';
  $('#rubrique_1')[0].childNodes.forEach(item => {
    text += item.tagName !=='LI' && item.data.trim().length > 0 ? item.data.trim(): '';
  }) ;
  console.log(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul id="rubrique_1" class="questionZone ui-sortable">
  Rubrique par défaut
  <li id="question_1" class="questionStyle">(Q) Matrice case a coché</li>
  <li id="question_2" class="questionStyle">(Q) Matrice case a coché</li>
</ul>
<button onclick="decode()">Decode</button>

@BoudouftBilel if this is your requirement, please approve my answer. Happy to have an upvote :) — Nitheesh, Sep 16 '20 at 14:25

Get html in ul outside li

2 Answers2