Frage Eine Liste mit jQuery durchsuchen


Ich habe eine Liste von Gegenständen, die ich von jedem beliebigen Punkt aus durchqueren möchte. Ich möchte auch die Liste umkreisen, was bedeutet, wenn ich auf dem letzten Listenelement lande und auf Weiter klicke, möchte ich, dass das nächste Element das erste Element auf der Liste ist. Meine Seite ist einfach, nur eine ungeordnete Liste von 5 Elementen, 2 Schaltflächen (eine für die vorherige und eine für die nächste) und eine Textarea, die die Ergebnisse anzeigt. Hier ist mein Code:

$(function() {
  var prev = $("#prev"); // grabbing the prev button
  var next = $("#next"); // grabbing the next button
  var listItems = $("#listItems p"); // grabbing the p elements of the list items
  var results = $("#results"); // grabbing the textarea
  var itemText; // variable for holding the text node
  var selectedItem; // variable for the current selected item

  listItems.click(function() { // click event for any item
    itemText = $(this).text(); // selects the text of the clicked list item
    results.text(itemText); // adds text to textarea
    selectedItem = $(this).parent(); // sets selected item as the li element of the selected p element
  });

  next.click(function() { // click event for next button
    var nextItem = selectedItem.next(); // setting the next item
    itemText = nextItem.children("p").text(); // grabbing the text of the next item
    results.text(itemText); // adds text to textarea
    selectedItem = nextItem; // sets next item
  });

  prev.click(function() { // click event for the prev button
    var prevItem = selectedItem.prev(); // setting the prev item
    itemText = prevItem.children("p").text(); // grabbing the text of the prev item
    results.text(itemText); // adds text to textarea
    selectedItem = prevItem; // sets prev item
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="listItems">
        <li><p>First item</p></li>
        <li><p>Item 2</p></li>
        <li><p>Item 3</p></li>
        <li><p>Item 4</p></li>
        <li><p>Last item</p></li>
</ul>
<button id="prev">Prev</button>
<textarea name="results" id="results" cols="30" rows="1"></textarea>
<button id="next">Next</button>

Wenn ich auf den letzten Eintrag klicke oder ihn anfasse, wird durch Drücken der nächsten Schaltfläche das Textfeld gelöscht und beide Schaltflächen werden nicht mehr angezeigt. Logischerweise weiß ich, dass es eine if-Anweisung geben muss, die angibt, ob der aktuelle Gegenstand der letzte Gegenstand ist, dann muss der nächste Gegenstand der erste Gegenstand sein. Ich konnte einfach nicht herausfinden, wie ich es programmieren sollte. Hier ist die Frage:

jsfiddle


7
2018-05-09 03:45


Ursprung


Antworten:


$(function () {
    var prev = $("#prev");
    var next = $("#next");
    var listItems = $("#listItems p");
    var results = $("#results");
    var itemText;
    var selectedItem;

    listItems.click (function () {
        itemText = $(this).text();
        results.text(itemText);
        selectedItem = $(this).parent();
    });

    next.click (function () {
        var nextItem = selectedItem.next();
        if(nextItem.length==0){
            nextItem = $("#listItems li").first();
        }            
        itemText = nextItem.children("p").text();
        results.text(itemText);
        selectedItem = nextItem;
    });

    prev.click (function () {
        var prevItem = selectedItem.prev();
        if(prevItem.length==0){
            prevItem = $("#listItems li").last();
        }
        itemText = prevItem.children("p").text();
        results.text(itemText);
        selectedItem = prevItem;
    });
});

Wenn es die letzte Elementeinstellung als letzte und erste erreicht, wird das Problem gelöst.

Fürs nächste:

    if(nextItem.length==0){
        nextItem = $("#listItems li").first();
    }

Für vorheriges:

    if(prevItem.length==0){
        prevItem = $("#listItems li").last();
    }

Demo: https://jsfiddle.net/763x97qb/1/


0
2018-05-09 03:59



Über dem Code können Sie überprüfen, ob das aktuelle Element das letzte oder das erste Element ist, und einige Bedingungen wie diese setzen:

next.click (function () { // click event for next button
  var nextItem = '';
  if(selectedItem.index() == listItems.length -1 ){//if the last element
      nextItem == listItems[0];
  }else{
    nextItem = selectedItem.next(); // setting the next item
    itemText = nextItem.children("p").text(); // grabbing the text of the next item
    results.text(itemText); // adds text to textarea
    selectedItem = nextItem; // sets next item
  }
});

prev.click (function () { // click event for the prev button
  var prevItem = '';
  if(selectedItem.index() == 0 ){//if the first element
      prevItem == listItems[listItems.length-1]
  }else{
    prevItem = selectedItem.prev(); // setting the prev item
    itemText = prevItem.children("p").text(); // grabbing the text of the prev item
    results.text(itemText); // adds text to textarea
    selectedItem = prevItem; // sets prev item
  }
});

2
2018-05-09 03:57



Nicht sicher, ob das hilft, aber hier ist ein jQuery-Plugin, das ich entwickelt habe, um eine Elementliste neu zu ordnen, ausgehend von einem gelieferten Index:

$.fn.reorder = function(head) {
   var arr  = this;
   var rest = arr.splice(head, arr.length - head);
   return rest.concat(Array.prototype.slice.call(arr, 0));
};

// make the array start from the 3rd element
$.each(listItems.reorder(3), function() { ...

Im Beispiel Aufruf .reorder(3) verschiebt alle Elemente über den dritten Index hinaus in den Vordergrund des Arrays, so dass Sie dann mit Ihrer Sammlung über iterieren können $.each in der erwarteten Reihenfolge.


0
2018-05-09 03:56



Sie können verwenden selectedItem.is(':first-child') und selectedItem.is(':last-child') Selektoren, um herauszufinden, ob Sie den Anfang oder das Ende der Liste erreicht haben. Dann können Sie das erste oder letzte Element der Liste auswählen, indem Sie zum übergeordneten Element wechseln und das erste / letzte Element mit der Suche suchen selectedItem.parent().find('li:first') oder selectedItem.parent().find('li:last')

$(function () {
    var prev = $("#prev");
    var next = $("#next");
    var listItems = $("#listItems p");
    var results = $("#results");
    var itemText;
    var selectedItem;

    listItems.on('click', function () {
        itemText = $(this).text();
        results.text(itemText);
        selectedItem = $(this).parent();
    });

    next.on('click', function () {
        var nextItem;
        //if i'm the last child, go to the parent and find the first child
        if (selectedItem.is(':last-child'))
            nextItem = selectedItem.parent().find('li:first');
        else
            nextItem = selectedItem.next();
        itemText = nextItem.children("p").text();
        results.text(itemText);
        selectedItem = nextItem;
    });

    prev.on('click', function () {
    var prevItem;
    //if im the first child, go to the parent to find the last
    if (selectedItem.is(':first-child'))
        prevItem = selectedItem.parent().find('li:last');
    else
        prevItem = selectedItem.prev();
    itemText = prevItem.children("p").text();
    results.text(itemText);
    selectedItem = prevItem;
  });
});

0
2018-05-09 03:59



Versuchen Sie es zu nutzen id von button Text umwandeln next , prev

var results = $("#results");
var items = $("#listItems li")
// show first `li p` text
results.text(items.eq(0).addClass("active").find("p").text());

function cycle(idx) {
  var active = $(".active")
  // cycle through `next` , `prev` `li` elements
  , next = active[idx]().is("*") 
           ? active[idx]() 
           : idx === "prev" 
             ? active.siblings().eq(active.index("li") - 1) 
             : active.siblings().addBack().eq(0);

  active.removeClass("active");
  // set text of `results` with `next` , `prev` `li p` text
  results.text(next.addClass("active").find("p").text());
};

$("button").on("click", function(e) {
  cycle(this.id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="listItems">
  <li>
    <p>First item</p>
  </li>
  <li>
    <p>Item 2</p>
  </li>
  <li>
    <p>Item 3</p>
  </li>
  <li>
    <p>Item 4</p>
  </li>
  <li>
    <p>Last item</p>
  </li>
</ul>
<button id="prev">Prev</button>
<textarea name="results" id="results" cols="30" rows="1"></textarea>
<button id="next">Next</button>


0
2018-05-09 04:51