CODEWITHSUNDEEP
javascriptjqueryarraysvariablesattributes
JUAN MANUEL LEÓN RAMÍREZ
JUAN MANUEL LEÓN RAMÍREZ

Reputation: 11

jQuery - Array element as selector

I created a little script to "like" posts on a certain forum that I frequent, the script works as intended, liking every post on a certain thread.

Now I want to improve it by making it like posts of certain users, rather than every user, so far, I managed to make it work for a specific user:

$(function(){

var TargetLink = $("[data-author='SpecificUser'] span:contains('Like')" );

if (TargetLink.length )
    TargetLink.each ( function () {

        var clickEvent  = document.createEvent ("HTMLEvents");
        clickEvent.initEvent ("click", true, true);
        this.dispatchEvent (clickEvent);
    } );

 });

But I can't figure out how to make it work for several users since I'm very new to jquery and javascript, in fact I only started learning it just so I could make this script.

My idea is have an array with user names, make the value of the atribute "data-autor" a variable and then loop the liking function, but I can't figure out how to do it.

The html tree looks something like this:

<li id="post-####" class="message   " data-author="User 1">
<div>
    <div>
        .
        .
        .
        <span class="LikeLabel">Like</span>
.
.
.
<li id="post-####" class="message   " data-author="User 2">
<div>
    <div>
        .
        .
        .
        <span class="LikeLabel">Like</span>

I want to make something like this:

var userNames = ["User1", "User 2", "User 3",...,"User N"];

and then use the elements of the array as the value of the attribute [data-autor='userNames'] in my script, so only post from a specific list of users gets liked, but I have no idea how, I already read several questions but none seem to help me with my specific problem, all the tutorials I find are very basic and doesn't deal with using elements from an array as attribute values.

Upvotes: 1

Views: 3681

Answers (3)

guest271314
guest271314

Reputation: 1

Try

// do stuff at `click` event
$("span").on("click", function(e) {
  // log `user` , `html` of `span` element
  console.log($(e.target).parent().data("author"), e.target.innerHTML);
});
// array of user names; note "User 6" does not exist at `html`
var userNames = ["User 1", "User 2", "User 3"
                , "User 4", "User 5", "User 6"];
// loop through items within `userNames` array
var links = function links(arr) {
  // return a
  return $(arr).map(function(i, user) {
    // create jQuery object
    var TargetLink = $("[data-author='" + user + "'] span:contains('Like')");
    // does element, collection exist ?
    if (TargetLink.is("*")) {
      // if element , collection exists, loop through collection
      TargetLink.each(function() {
        // do stuff 
        var clickEvent = document.createEvent("HTMLEvents");
        clickEvent.initEvent("click", true, true);
        this.dispatchEvent(clickEvent);
      })
    };
    // return `TargetLink` element, collection as jQuery object,
    // if user does not exist , will not be included in results
    return TargetLink[0]
  })
};
console.log(links(userNames));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div data-author="User 1"><span>Like</span>
</div>
<div data-author="User 2"><span>Like</span>
</div>
<div data-author="User 3"><span>Like</span>
</div>
<div data-author="User 4"><span>Like</span>
</div>
<div data-author="User 5"><span>Like</span>
</div>

Upvotes: 1

user602271
user602271

Reputation:

$() accepts an array of strings as a selector, then using your array of users, you can create an array of selectors.

var userNames = ["User1", "User 2", "User 3",...,"User N"];
var selectors = $.map(userNames, function(item){ // this creates a new array

  // replace your selector placeholder with the username
  var selector = "[data-author='%s'] span:contains('Like')".replace('%s', item);
  return selector;
});

users = $(selectors); // Create your jquery object

// Here comes your code...
// Removed the if cause "each" will work even if length is 0
users.each ( function ( ) { // for each matched element
    // Simplified your code
    $(this).click(); // "this" is the "like"
} );

Upvotes: 0

Flo
Flo

Reputation: 359

This Link goes through your options.

I recommend this method.

Query.each:

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

STACKOVERFLOW

Upvotes: 0

Related Questions