jstree重命名类中的所有节点

Good morning,

早上好，

I'm using a jstree that looks like this

我正在使用看起来像这样的jstree

<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
        <li class="mar">Mar</li>
      </ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
      </ul>
    </li>
  </ul>
</div>

What I want to do is rename all Nodes from class "feb" for example, but my attempts with rename_node or set_text doesn't work. Can someone please tell me how I can do this?

我想要做的是从类“feb”重命名所有节点，但是我使用rename_node或set_text的尝试不起作用。有人可以告诉我怎么做到这一点？

EDIT : By rename, I mean change the html text inside the node. So for example, if I want to change all Node of class feb and name them "February", the Output for all node of class feb will be

编辑：通过重命名，我的意思是更改节点内的html文本。因此，例如，如果我想要更改类feb的所有节点并将它们命名为“February”，则类feb的所有节点的输出将是

<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">February</li>
        <li class="mar">Mar</li>
      </ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">February</li>
      </ul>
    </li>
  </ul>
</div>

EDIT 2 : I made a simplified code so you can understand where my problem is. Here is my html

编辑2：我制作了一个简化的代码，以便您可以了解我的问题所在。这是我的HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="dist/themes/default/style.min.css">
  </head>
  <body>
    <div id="menu" class="ui-widget-content">
      <div id="jstree">
        <ul id="root">
        </ul>
      </div>
    </div>
    <script src="jquery/jquery.min.js"></script>
    <script src="dist/jstree.min.js"></script>
    <script src="jquery/functions.js"></script>
  </body>
</html>

And Here is my javascript file (saved in jquery/functions.js):

这是我的javascript文件（保存在jquery / functions.js中）：

$(function() {
  var actDate = new Date("2014-10-17");
  var frstDate = new Date("2013-05-10");
  var aD = new Date(frstDate);

  // The following double loop create the tree nodes
  for(var i = frstDate.getFullYear(); i <= actDate.getFullYear(); i++){
    aD.setFullYear(i);

    var yearNode = $('<li>', {
      class: i.toString()
    }).text(i.toString());

    var year = $('<ul>');
    year.appendTo(yearNode);

    for(var j = 0; j <= 11; j++){ // jan = 0, feb = 1 etc.
      aD.setMonth(j);
      if(aD > frstDate && aD < actDate){
      // Add for loop for Days here
      if(j==0){$('<li>', {class: 'jan'}).text("jan").appendTo(year);}
      else if(j==1){$('<li>', {class: 'feb'}).text("feb").appendTo(year);}
      else if(j==2){$('<li>', {class: 'mar'}).text("mar").appendTo(year);}
      else if(j==3){$('<li>', {class: 'apr'}).text("apr").appendTo(year);}
      else if(j==4){$('<li>', {class: 'may'}).text("may").appendTo(year);}
      else if(j==5){$('<li>', {class: 'jun'}).text("jun").appendTo(year);}
      else if(j==6){$('<li>', {class: 'jul'}).text("jul").appendTo(year);}
      else if(j==7){$('<li>', {class: 'aug'}).text("aug").appendTo(year);}
      else if(j==8){$('<li>', {class: 'sep'}).text("sep").appendTo(year);}
      else if(j==9){$('<li>', {class: 'oct'}).text("oct").appendTo(year);}
      else if(j==10){$('<li>', {class: 'nov'}).text("nov").appendTo(year);}
      else if(j==11){$('<li>', {class: 'dec'}).text("dec").appendTo(year);}
      }
    }
    yearNode.appendTo($('#root'));
  }

  $('#jstree').jstree(); // creation of the tree : tree is normally displayed

  // The following prints "not done"
  if($('#jstree').jstree().rename_node(
    $('#jstree').jstree().get_node(".feb"),
    "February"))
  {
    alert("done");
  }
  else{
    alert("not done"); 
  }
  $('#jstree').jstree('rename_node', [$('#j1_10'), "February"]); // same, does not work
  $('li ul li.feb').text('February'); // does not work neither.

  // I tried other things (like set_text) but none of them worked.
});

I enter a first date and the actual Date and a Tree of month and year is shown in a jstree. The tree is displayed correctly, but all of my tries didn't work and I don't understand where i'm doing it wrong.

我输入第一个日期，实际日期和月份和年份的树在jstree中显示。树正确显示，但我的所有尝试都没有工作，我不明白我做错了什么。

5 个解决方案

#1

If it's jQuery try:

如果是jQuery尝试：

$("li.feb").text("February");

#2

Just use jquery like:

只需使用jquery：

$("#jstree ul li.feb").text("February");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
        <li class="mar">Mar</li>
      </ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
      </ul>
    </li>
  </ul>
</div>

#3

You could keep your full month names in a JavaScript object:

您可以将完整的月份名称保存在JavaScript对象中：

var monthNames = {
    jan: "January",
    feb: "February",
    mar: "March",
    apr: "April",
    may: "May",
    jun: "June",
    jul: "July",
    aug: "August",
    sep: "September",
    oct: "October",
    nov: "November",
    dec: "December"
}

And then loop through your months, finding the appropriate elements and setting the text within:

然后遍历几个月，找到适当的元素并在其中设置文本：

$jstree = $('#jstree');
$.each(monthNames, function(i,v){
    $jstree.find('li.'+i).text(v);
});

JSFiddle

的jsfiddle

#4

Can you show the code where you're initialising the jstree? At what point are you calling this code? The code below should work:

你可以在初始化jstree的地方显示代码吗？你在什么时候调用这段代码？以下代码应该有效：

$('li ul li.feb').text('February');
// Optionally update other months also
$('li ul li.mar').text('March');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="jstree">
  <ul id="root">
    <li>2013
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
        <li class="mar">Mar</li>
      <ul>
    </li>
    <li>2014
      <ul>
        <li class="jan">Jan</li>
        <li class="feb">Feb</li>
      <ul>
    </li>
  </ul>
</div>

#5

I found the answer.

我找到了答案。

first, we have to set check_callback to true when we create the tree:

首先，我们在创建树时必须将check_callback设置为true：

  $('#jstree').jstree({
    "core" : {
      // so that create works
      "check_callback" : true
    }
  });

Then, use the function

然后，使用该功能

$('#jstree').jstree().rename_node({"id":"j1_10"}, 'February');

for example, and that works :)

例如，那工作:)

#1